Canh giữa theo chiều dọc và chiều ngang với CSS – Làm việc thông thái

Posted on by mtoplistChuyên mục:Top List

Bài viết này sẽ chỉ ra các cách khác nhau để canh giữa theo chiều dọc và chiều ngang với HTML + CSS, được trình bày theo thứ tự thời gian: từ cách được thực hiện trong quá khứ (mà chúng ta nên tránh bây giờ) đến những cách hiện đại để canh giữa nội dung trong hiện tại.

Có thể có các cách canh giữa khác (ví dụ: sử dụng margin: auto), nhưng để đơn giản và cung cấp một số thông tin cơ bản, bài viết sẽ chỉ tập trung vào 5 cách sau:

  • Sử dụng bảng
  • Sử dụng margin âm
  • Sử dụng translation
  • Sử dụng FlexBox
  • Sử dụng Grid

Sử dụng bảng

Lưu ý: Đừng sử dụng phương pháp này.

Ban đầu, khi không có cách nào dễ dàng để canh giữa các phần tử, người ta sử dụng các bảng để canh giữa theo chiều dọc và chiều ngang. Tất nhiên, đây là một cách làm rất tệ, nhưng nó là lựa chọn duy nhất vào thời điểm đó.

Ý tưởng là thêm một bảng có một ô duy nhất và căn giữa ô đó theo chiều dọc và chiều ngang:

<table>
  <tr>
    <td>
      Centered content
    </td>
  </tr>
</table>

table {
  width: 100%;
  height: 100%;
}

td {
  vertical-align: center;
  text-align: center;
}

Phương pháp này sai vì nhiều lý do:

  • Quá dài dòng: nó yêu cầu quá nhiều yếu tố để đạt được trọng tâm của nội dung.
  • Sử dụng sai HTML ngữ nghĩa: các phần tử được sử dụng cho giao diện của chúng chứ không phải ý nghĩa của chúng.
  • Nó không thể truy cập được: liên quan đến điểm trên, nó sử dụng một bảng để bố trí thay vì hiển thị dữ liệu.

Sử dụng margin âm

Lưu ý: Tránh phương pháp này.

Sau đó, người ta di chuyển vị trí các phần tử ở dạng tuyệt đối đến 50% của vùng chứa theo chiều dọc và chiều ngang, sau đó áp dụng một margin âm của một nửa chiều cao và chiều rộng cho trên cùng và bên trái, tương ứng

<div>Centered content</div>
div {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 60px;
  line-height: 60px;
  margin-left: -100px;
  margin-top: -30px;
  text-align: center;
}

Phương pháp này tốt hơn phương pháp trước, nhưng nó cũng có một số nhược điểm:

  • Cần một số công việc trước: chúng ta cần biết trước kích thước của phần tử để đặt lề âm thích hợp.
  • Có thể ảnh hưởng đến bố cục: thay đổi lề có thể ảnh hưởng đến vị trí của các phần tử xung quanh, chiều cao dòng có thể gây ra sự cố với nhiều dòng, v.v.
  • Vẫn còn quá dài dòng: phương pháp này yêu cầu nhiều thuộc tính CSS để căn giữa nội dung đúng cách.

Sử dụng translation

Phương pháp này gần với phương pháp trước đó. Ý tưởng là định vị tuyệt đối phần tử ở trên cùng và bên trái 50%, sau đó dịch nó xuống một nửa kích thước bằng cách sử dụng transform

div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Phần trăm trong translate có liên quan đến kích thước của phần tử. Vì vậy, bằng cách translate -50%, ta di chuyển một nửa kích thước của nó sang trái và trên cùng Không cần biết kích thước của các phần tử.

Sử dụng FlexBox

Phương pháp trước đây đã hoạt động trong một thời gian dài và nó vẫn có thể tiện dụng. Nhưng sau đó, đã xuất hiện những cách mới để sắp xếp nội dung trong CSS: Flexbox và Grid. Và chúng cung cấp các khả năng định vị và liên kết nội dung (không chỉ canh giữa)

div {
  display: flex;
  align-items: center;
  justify-content: center;
}

Đây có thể được coi là một cách tiếp cận bố cục nội dung “tự nhiên” hơn. Nó sẽ hoạt động với một hoặc nhiều phần tử (phần tử con của vùng chứa được uốn) và cung cấp nhiều tùy chọn hơn so với các phương pháp trước đó.

Sử dụng Grid

Với Grid, chúng ta có thể áp dụng các thuộc tính tương tự như với FlexBox, chỉ cần thay đổi giá trị của display từ flex thành grid và tất cả sẽ hoạt động:

div {
  display: grid;
  align-items: center;
  justify-content: center;
}

Sau đó, chúng ta có thể kết hợp align-items và justify-content thành một thuộc tính duy nhất: place-items, làm cho mọi thứ ngắn hơn

div {
  display: grid;
  place-items: center;
}

Xem thêm:

mtoplist