Làm thế nào để - Các phần tử trung tâm 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 với CSS.
Tôi được căn giữa theo chiều dọc và chiều ngang.
Làm thế nào để căn giữa mọi thứ theo chiều dọc
Thí 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>
Cách căn giữa theo chiều dọc VÀ chiều ngang
Thí 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>
Bạn cũng có thể sử dụng flexbox để căn giữa các thứ:
Thí dụ
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid
green;
}
Mẹo: Đi tới 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: Đi tới 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: Đi tới Hướng dẫn CSS Flexbox của chúng tôi để tìm hiểu thêm về flexbox.