Cách căn giữa một phần tử có vị trí tuyệt đối theo chiều dọc và chiều ngang bằng CSS

Chi tiết khóa học

Trong bài viết hôm này trung tâm tin học NIIT Hà Nội sẽ hướn dẫn bạn cách căn giữa một phần tử tuyệt đối theo chiều dọc hoặc chiều ngang - hoặc cả hai - trong một vùng chứa. chung ta sẽ cùng xem nhé.

1. Ví dụ về mã căn giữa elemenet

Để căn giữa elemenet theo chiều ngang:

element {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

Để căn giữa một phần tử theo chiều dọc:

element {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
}

Để căn giữa một phần tử theo cả chiều dọc và chiều ngang:

  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;

Vị trí tuyệt đối hoạt động như thế nào?

Theo mặc định, các phần tử có một staticvị trí trừ khi được chỉ định khác là absolute, hoặc .fixedrelativesticky

Chúng ta sẽ sử dụng giao diện người dùng sau để giải thích cách absolutehoạt động của các phần tử:

Đây là mã cho giao diện người dùng:

<div class="container">
  <div class="blue-block"></div>
  <div class="green-block"></div>
  <div class="black-block"></div>
</div>

.container {
  margin: 20px;
  display: flex;
  border: 1px solid black;
  padding: 20px;
  width: 400px;
}

.blue-block,
.green-block,
.black-block {
  width: 100px;
  height: 100px;
}

.blue-block {
  background-color: blue;
}

.green-block {
  background-color: green;
}

.black-block {
  background-color: black;
}

Hộp chứa này có ba khối: xanh lam, xanh lục và đen, tương ứng. Tất cả các khối hiện đang có static, vì vậy chúng được sắp xếp theo cùng một cách trong DOM, giống như chúng trong mã.

Điều gì xảy ra khi bạn cho khối màu xanh lá cây một absolutevị trí:

.green-block {
  background-color: green;
  position: absolute;
  margin-left: 20px;
  margin-top: 20px;
}

Bây giờ bạn có thể thấy rằng khối màu xanh lá cây đã rời khỏi luồng tài liệu. Vùng chứa chỉ áp dụng hiển thị linh hoạt cho các phần tử màu xanh lam và đen và phần tử màu xanh lá cây sẽ di chuyển xung quanh mà không ảnh hưởng đến các phần tử khác.

Vì vậy, điều gì sẽ xảy ra nếu chúng ta muốn đặt khối màu xanh lá cây này ở trung tâm

Cách đặt các phần tử tuyệt đối ở trung tâm

Định vị các phần tử tĩnh vào trung tâm thường liên quan đến lề tự động, vì vậy a margin: autophải là đủ, phải không?

.green-block {
  background-color: green;
  position: absolute;
  margin: auto;
}

Nó chắc chắn không. Là một absolutephần tử, nó mất dòng chảy trong vùng chứa. Có thể là một left: autovà right: autosau đó:

.green-block {
  background-color: green;
  position: absolute;
  left: auto;
  right: auto;
}

Vẫn không có gì. Tại thời điểm này, bạn có thể bị cám dỗ để sử dụng các giá trị được mã hóa cứng:

.blue-block, .black-block {
  display: none;
}

.green-block {
  background-color: green;
  position: absolute;
  left: 190px;
  top: 90px;
}

Kết quả này trông hoàn hảo (hoặc gần như hoàn hảo) nhưng không phải là giải pháp tốt nhất vì khi bạn thay đổi kích thước của vùng chứa, bạn phải thay đổi các giá trị được mã hóa cứng.

Bây giờ, hãy xem cách bạn có thể căn giữa các phần tử có vị trí tuyệt đối.

Phần đầu tiên là áp dụng một relativevị trí cho vùng chứa:

.container {
  // ...
  position: relative;
}

Áp dụng một vị trí tương đối cho vùng chứa sẽ cung cấp cho phần tử tuyệt đối một ranh giới. Các phần tử tuyệt đối được giới hạn bởi phần tử cha có vị trí tương đối gần nhất. Nhưng nếu không có cái nào trong số đó tồn tại, chúng sẽ bị giới hạn bởi khung nhìn.

Tiếp theo, chúng ta sẽ căn giữa khối theo chiều ngang. Áp dụng a leftvà rightthuộc tính với giá trị bằng 0. Các thuộc tính này lần lượt xác định khoảng cách của cạnh trái (của khối) đối với vùng chứa và cạnh phải đối với vùng chứa.

.green-block {
  // ...
  left: 0;
  right: 0;
}

Càng leftchiếm ưu thế hơn vì vùng chứa hiển thị các phần tử từ trái sang phải.

Phần tiếp theo:

.green-block {
  // ...
  margin: 0 auto;
}

Và bạn có một phần tử tuyệt đối căn giữa theo chiều ngang. Hãy nghĩ về các thuộc tính leftvà rightchỉ định một vùng chứa bên trong cho khối. Trong vùng chứa này, lề trái và lề phải autosao cho chúng bằng nhau và đưa phần tử vào giữa.

Để căn giữa khối này theo chiều dọc, bạn có thể đoán rằng nó đi theo hướng này:

.green-block {
  // ...
  top: 0;
  bottom: 0;
  margin: auto 0;
}

Và top chỉ bottom định khoảng cách giữa các cạnh trên và dưới của khối, trông giống như một thùng chứa bên trong. Sử dụng autotạo ra lợi nhuận bằng nhau cho margin-top và margin-bottom.

Kết hợp hai khái niệm với nhau, bạn có thể căn giữa khối theo chiều ngang và chiều dọc như thế này:

.green-block {
  background-color: green;
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

Với cách tiếp cận này, phần tử vẫn ở trung tâm nếu bạn thay đổi kích thước vùng chứa.

Kết thúc

Các phần tử tuyệt đối hoạt động khác với các phần tử tĩnh - chúng rời khỏi luồng tài liệu và theo mặc định, không tôn trọng vùng chứa mà chúng đã được khai báo.

Với một relativephần tử mẹ được định vị, một absolutephần tử được định vị có một ranh giới. Và với , và leftthuộc righttính có giá trị 0 (chỉ định khoảng cách của các cạnh) và lề tự động , phần tử tuyệt đối sẽ được căn giữa trong phần tử mẹ.topbottom

Lưu ý rằng đây không phải là cách duy nhất để định vị các phần tử tuyệt đối ở trung tâm. Chúng ta đã thấy đó trực tuyến cũng sử dụng a transform: translate...để đạt được điều này. Bạn có thể xem xét điều đó nếu bạn thích.