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.

Category:
Tags:

Bình luận!

Xin lưu ý rằng tất cả các bình luận đều được kiểm duyệt theo chính sách bảo mật và tất cả các liên kết đều là nofollow. KHÔNG sử dụng từ khóa trong trường tên. Hãy để lại một cuộc trò chuyện cá nhân và ý nghĩa. *