Cách TO - Căn giữa một nút trong DIV
Tìm hiểu cách căn giữa một phần tử nút theo chiều dọc và chiều ngang bằng CSS.
Cách căn giữa một nút 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">
<button>Centered Button</button>
</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">
<button>Centered Button</button>
</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.