Cách căn giữa mọi thứ bằng CSS – Căn chỉnh Div, Text, v.v. – trung tâm vị trí kiểu html

  & lt; div class = "container" & gt;
  & lt; div class = "con" & gt; & lt; / div & gt;
& lt; / div & gt;
 

 . container {
  font-family: arial;
  kích thước phông chữ: 24px;
  lề: 25px;
  chiều rộng: 350px;
  chiều cao: 200px;
  outline: gạch ngang 1px đen;
  /* Thành lập */
  chức vụ: thân nhân;
}

.đứa trẻ {
  chiều rộng: 50px;
  chiều cao: 50px;
  background-color: đỏ;
  / * Căn giữa theo chiều dọc * /
  vị trí: tuyệt đối;
  top: 50%;
  biến đổi: dịch (0, -50%);
}
 

Lưu ý rằng translate (0, -50%) là viết tắt của translateX (0) và translateY (-50%) . Bạn cũng có thể viết convert: translateY (-50%) để căn giữa phần tử con theo chiều dọc.

Cách căn giữa một Div theo chiều dọc với Flexbox

Giống như căn giữa mọi thứ theo chiều ngang, Flexbox giúp căn giữa mọi thứ theo chiều dọc cực kỳ dễ dàng.

Để căn giữa một phần tử theo chiều dọc, hãy áp dụng display : flex và align-items: center thành phần tử mẹ:

  & lt; div class = "container" & gt ;
  & lt; div class = "con" & gt; & lt; / div & gt;
& lt; / div & gt;  

 . container {
  font-family: arial;
  kích thước phông chữ: 24px;
  lề: 25px;
  chiều rộng: 350px;
  chiều cao: 200px;
  outline: gạch ngang 1px đen;
  / * Căn giữa theo chiều dọc * /
  hiển thị: flex;
  align-các mục: trung tâm;
}

.đứa trẻ {
  chiều rộng: 50px;
  chiều cao: 50px;
  background-color: đỏ;
}
 

Cách căn giữa Cả theo chiều dọc và chiều ngang

Cách căn giữa một dải theo chiều dọc và Theo chiều ngang với Định vị tuyệt đối CSS và Lề phủ định

Điều này rất giống với phương pháp ở trên để căn giữa một phần tử theo chiều dọc. Giống như lần trước, bạn phải biết chiều rộng và chiều cao của phần tử bạn muốn căn giữa.

Đặt thuộc tính position của phần tử mẹ thành tương đối .

Sau đó, đặt thuộc tính position của trẻ thành tuyệt đối , top thành 50% , và trái thành 50% . Thao tác này chỉ căn giữa góc trên cùng bên trái của phần tử con theo chiều dọc và chiều ngang.

Để thực sự căn giữa phần tử con, hãy áp dụng lề trên âm được đặt thành một nửa chiều cao của phần tử con và đặt lề trái âm thành một nửa chiều rộng của phần tử con:

 & lt; div class = "container" & gt;
  & lt; div class = "con" & gt; & lt; / div & gt;
& lt; / div & gt;
 

 . container {
  font-family: arial;
  kích thước phông chữ: 24px;
  lề: 25px;
  chiều rộng: 350px;
  chiều cao: 200px;
  outline: gạch ngang 1px đen;
  /* Thành lập */
  chức vụ: thân nhân;
}

.đứa trẻ {
  chiều rộng: 50px;
  chiều cao: 50px;
  background-color: đỏ;
  / * Căn giữa theo chiều dọc và chiều ngang * /
  vị trí: tuyệt đối;
  top: 50%;
  trái: 50%;
  lề: -25px 0 0 -25px; / * Áp dụng lề trên và lề trái phủ định để thực sự căn giữa phần tử * /
}
 

Cách căn giữa một phần theo chiều dọc và chiều ngang với Chuyển đổi và dịch

Sử dụng phương pháp này để căn giữa một phần tử theo chiều dọc và chiều ngang nếu bạn không biết kích thước chính xác của nó và không thể sử dụng Flexbox.

Đầu tiên, hãy đặt thuộc tính position của phần tử mẹ thành tương đối .

Tiếp theo, đặt thuộc tính position của phần tử con thành tuyệt đối , top thành 50% và trái thành 50% .

Cuối cùng, hãy sử dụng biến đổi: dịch (-50%, -50%) để thực sự căn giữa phần tử con:

  & lt; div class =" container "& gt;
  & lt; div class = "con" & gt; & lt; / div & gt;
& lt; / div & gt;
 

 . container {
  font-family: arial;
  kích thước phông chữ: 24px;
  lề: 25px;
  chiều rộng: 350px;
  chiều cao: 200px;
  outline: gạch ngang 1px đen;
  /* Thành lập */
  chức vụ: thân nhân;
}

.đứa trẻ {
  chiều rộng: 50px;
  chiều cao: 50px;
  background-color: đỏ;
  / * Căn giữa theo chiều dọc và chiều ngang * /
  vị trí: tuyệt đối;
  top: 50%;
  trái: 50%;
  biến đổi: dịch (-50%, -50%);
}
 

Cách căn giữa một Div theo chiều dọc và chiều ngang với Flexbox

Flexbox là cách dễ nhất để căn giữa một phần tử theo cả chiều dọc và chiều ngang.

Đây thực sự chỉ là một kết hợp của hai phương pháp Flexbox trước đó. Để căn giữa (các) phần tử con theo chiều ngang và chiều dọc, hãy áp dụng justify-content: center và align-items: center cho phần tử mẹ:

  & lt; div class = "container" & gt;
  & lt; div class = "con" & gt; & lt; / div & gt;
& lt; / div & gt;
 

 . container {
  font-family: arial;
  kích thước phông chữ: 24px;
  lề: 25px;
  chiều rộng: 350px;
  chiều cao: 200px;
  outline: gạch ngang 1px đen;
  / * Căn giữa theo chiều dọc và chiều ngang * /
  hiển thị: flex;
  justify-content: trung tâm;
  align-các mục: trung tâm;
}

.đứa trẻ {
  chiều rộng: 50px;
  chiều cao: 50px;
  background-color: đỏ;
}
 

Đó là mọi thứ bạn cần biết để tập trung vào những gì tốt nhất của chúng. Bây giờ, hãy đi ra và căn giữa tất cả mọi thứ.