Cách - Căn giữa các phần tử theo chiều dọc
Tìm hiểu cách căn giữa một phần tử theo chiều dọc và chiều ngang bằng CSS.
Tôi tập trung theo chiều dọc và chiều ngang.
Cách căn giữa mọi thứ theo chiều dọc
Ví dụ
<style>
.container {
height: 200px;
position:
relative;
border: 3px solid green;
}
.vertical-center {
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
</style>
<div
class="container">
<div class="vertical-center">
<p>I am vertically centered.</p>
</div>
</div>
Hãy tự mình thử » Cách căn giữa theo chiều dọc và chiều ngang
Ví dụ
<style>
.container {
height: 200px;
position:
relative;
border: 3px solid green;
}
.center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform:
translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
<div
class="container">
<div class="center">
<p>I am vertically and horizontally centered.</p>
</div>
</div>
Hãy tự mình thử »Bạn cũng có thể sử dụng flexbox để căn giữa mọi thứ:
Ví dụ
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid
green;
}
Hãy tự mình thử »Mẹo: Hãy truy cập Hướng dẫn căn chỉnh CSS của chúng tôi để tìm hiểu thêm về cách căn chỉnh các phần tử.
Mẹo: Hãy truy cập Hướng dẫn chuyển đổi CSS của chúng tôi để tìm hiểu thêm về cách chia tỷ lệ các phần tử.
Mẹo: Hãy truy cập Hướng dẫn CSS Flexbox của chúng tôi để tìm hiểu thêm về flexbox.