Khi làm web bạn sẽ cần canh giữa các phần tử theo chiều ngang hoặc dọc (Vertical Centering). Với chiều ngang thì có thể dùng Flexbox với juscontent: center hoặc margin: 0 auto hay text-align: center. Còn với chiều dọc thì sao? Sẽ dùng cái gì để căn phần tử HTML ra giữa? Bài viết này sẽ đi trả lời những câu hỏi đó.
Cách 1: Dùng Display Flex
Đây là cách mình thường hay dùng nhất bởi code viết khá đơn giản.
Hãy xem ví dụ sau:
Viết mã HTML
<div class="box-center"> <p>Căn chỉnh theo chiều dọc</p> </div>
Và thêm CSS
.box-center {
display: flex;
justify-content: center;
align-items: center;
height: 150px;
border: 1px solid red;
}
Sử dụng align-items: center; để canh theo Vertically.
Cách 2: Sử thuộc tính Position: absolute
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
.box-container {
height: 200px;
position: relative;
border: 2px solid blue;
}
.box-center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="box-container">
<div class="box-center">
<p>Đoạn văn bản ví dụ</p>
</div>
</div>
</body>
</html>
Cách 3: Sử dụng Display: table
<!DOCTYPE html>
<html>
<head>
<style>
.box-container {
height: 200px;
position: relative;
border: 3px solid green;
display: table;
}
.box-center {
display: table-cell;
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="box-container">
<div class="box-center">
<p>Văn bản</p>
</div>
</div>
</body>
</html>
Bạn lưu ý là box-container cần phải đặt display: table. box-center là display: table-cell và thêm vertical-align: middle;
Cách 4: Sử dụng padding
Cũng với ví dụ ở cách 3 giờ thay bằng padding-top, phần tử sẽ tạo ra khoảng cách với mép trên cùng.
.box-center {
padding-top: 80px;
}
Kết luận: Với 4 cách trên bạn sẽ áp dụng để canh giữa phần tử theo chiều dọc trang trí cho website đẹp mắt. Cũng đang còn nhiều cách khác nữa tuy nhiên đây là những cách mình thấy đơn giản và dễ dùng nhất.
