Căn giữa mọi thứ là một trong những khía cạnh khó nhất của CSS. Bản thân các phương pháp này thường không khó hiểu. Thay vào đó, nó nhiều hơn do thực tế là có rất nhiều cách để căn giữa mọi thứ. Phương pháp bạn sử dụng có thể khác nhau tùy thuộc vào phần tử HTML mà bạn đang thử

< font style = "vertical-align: inherit;"> Bạn đang xem: cách căn giữa vùng chứa

Căn giữa mọi thứ là một trong những khía cạnh khó nhất của CSS.

Bản thân các phương pháp này thường không khó hiểu. Thay vào đó, nó nhiều hơn do thực tế là có rất nhiều cách để căn giữa mọi thứ.

Phương pháp bạn sử dụng có thể khác nhau tùy thuộc vào phần tử HTML mà bạn đang cố căn giữa hoặc bạn đang căn giữa nó theo chiều ngang hay chiều dọc.

Trong hướng dẫn này, chúng tôi sẽ xem qua cách căn giữa các phần tử khác nhau theo chiều ngang, chiều dọc và cả chiều dọc và chiều ngang.

Cách căn giữa theo chiều ngang

Căn giữa các phần tử theo chiều ngang là nói chung là dễ dàng hơn so với căn giữa chúng theo chiều dọc. Dưới đây là một số yếu tố phổ biến mà bạn có thể muốn căn giữa theo chiều ngang và các cách khác nhau để thực hiện.

Cách căn giữa văn bản với thuộc tính CSS Text-Align Center

Để căn giữa văn bản hoặc liên kết theo chiều ngang, chỉ cần sử dụng thuộc tính text-align với giá trị center :

  & lt; div class = "container" & gt;
  & lt; p & gt; Xin chào, Thế giới (ở giữa)! & lt; / p & 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;
}

P {
  / * Căn giữa theo chiều ngang * /
  text-align: center;
}
 

image-15

Cách Căn giữa một Div bằng CSS Margin Auto

Sử dụng thuộc tính viết tắt margin với giá trị 0 auto để căn giữa các phần tử cấp khối như div theo chiều ngang:

  & 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;
}

.đứa trẻ {
  chiều rộng: 50px;
  chiều cao: 50px;
  background-color: đỏ;
  / * Căn giữa theo chiều ngang * /
  margin: 0 auto;
}
 

box-centered-vertical

Cách căn giữa Div theo chiều ngang bằng Flexbox < / h3>

Flexbox là cách hiện đại nhất để căn giữa mọi thứ trên trang và giúp thiết kế bố cục đáp ứng dễ dàng hơn nhiều so với trước đây. Tuy nhiên, nó không được hỗ trợ đầy đủ trong một số trình duyệt cũ như Internet Explorer.

Để căn giữa một phần tử theo chiều ngang với Flexbox, chỉ cần áp dụng display: flex justify-content: center đến 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;
  / * Con giữa theo chiều ngang * /
  hiển thị: flex;
  justify-content: trung tâm;
}

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

box-centered-vertical-1

Cách căn giữa theo chiều dọc

Căn giữa các phần tử theo chiều dọc mà không có các phương pháp hiện đại như Flexbox có thể là một việc vặt thực sự. Ở đây, chúng ta sẽ xem xét một số phương pháp cũ hơn để căn giữa mọi thứ theo chiều dọc, sau đó hướng dẫn bạn cách thực hiện với Flexbox.

Cách Căn giữa Dọc với Định vị Tuyệt đối và Lề Phủ định của CSS

Trong một thời gian dài, đây là cách tốt nhất để căn giữa mọi thứ theo chiều dọc. Đối với phương pháp này, bạn phải biết chiều cao của phần tử bạn muốn căn giữa.

Đầu tiên, đặt thuộc tính position của phần tử mẹ thành relative .

Sau đó, đối với phần tử con, hãy đặt thuộc tính position thành tuyệt đối top thành 50% :

 & 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%;
}
 

box-centered-vertical-1

Nhưng điều đó thực sự chỉ căn giữa theo chiều dọc cạnh trên của phần tử con.

Để thực sự căn giữa phần tử con, đặt thuộc tính margin-top thành - (một nửa chiều cao của phần tử con) :

  .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%;
  margin-top: -25px; / * Một nửa chiều cao của phần tử này * /
}  

box-centered-vertical-final

Cách căn giữa một Div theo chiều dọc với Biến đổi và Dịch

Nếu bạn không biết chiều cao của phần tử bạn muốn căn giữa (hoặc ngay cả khi bạn làm như vậy), thì phương pháp này là một mẹo nhỏ.

Phương pháp này rất giống với phương pháp định biên phủ định ở trên. Đặt thuộc tính position của phần tử mẹ thành tương đối .

Đối với phần tử con, hãy đặt thuộc tính position thành tuyệt đối và đặt top thành 50% . Bây giờ thay vì sử dụng một lề âm để thực sự căn giữa phần tử con, chỉ cần sử dụng convert: translate (0, -50%) :

  & 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%);
}
 

box-centered-vertical-final-1

Lưu ý rằng translate (0, -50%) là viết tắt của translateX (0) 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 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: đỏ;
}
 

box-centered-vertical-final-2

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ử * /
}
 

box-centered-vertical-and-vertical

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% 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%);
}
 

box-centered-vertical-and-vertical-1

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 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: đỏ;
}
 

box-centered-vertical-and-vertical-2

Đó 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ứ.


Xem thêm những thông tin liên quan đến chủ đề làm thế nào để căn giữa container

4 cách CĂN GIỮA khối trong html css có thể bạn chưa biết | Học html css cơ bản

alt

  • Tác giả: Phan Văn Cương [Học Web Online]
  • Ngày đăng: 2021-12-22
  • Đánh giá: 4 ⭐ ( 6562 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Video này hướng dẫn bạn 4 cách để canh giữa khối trong css. Nó cực kỳ quan trọng trong việc xây dựng layout website của bạn.
    ------
    » » Bấm đăng ký kênh để tránh bỏ sót video mới://bit.ly/2RMvXez
    » » Nhận tài liệu học web miễn phí qua mail: https://www.hocwebdilam.com
    ------------
    Liên Kết Quan Trọng
    » Nhận tài liệu miễn phí: https://hocwebdilam.com?utm_source=youtube
    » Blog lập trình: http://unitop.com.vn
    » Đăng ký khoá học web đi làm: https://unitop.vn
    » Fanpage: https://facebook.com/unitop.vn
    » Fb: https://facebook.com/cuongtienlen

    --------------------------
    Xem Lộ Trình Học Lập Trình Web Đi Làm
    » http://unitop.vn

    unitop hocwebdilam

Kỹ thuật đóng hàng vào Container

  • Tác giả: vilas.edu.vn
  • Đánh giá: 5 ⭐ ( 2273 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cùng VILAS tìm hiểu về kỹ thuật đóng hàng vào Container với rất nhiều những quy tắc cần phải tuân thủ mà bạn nên biết nhé!

One moment, please...

  • Tác giả: www.dammio.com
  • Đánh giá: 4 ⭐ ( 2364 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

NHỮNG ĐIỀU CẦN BIẾT VỀ CONTAINER TRONG VẬN TẢI HÀNG HÓA

  • Tác giả: www.tecotec.com.vn
  • Đánh giá: 3 ⭐ ( 4408 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hiện nay trong vận chuyển hàng hóa xuất nhập khẩu, container là một trong những phương tiện được sử dụng phổ biến để đóng hàng. Container được sử dụng chủ yếu trong vận tải đường biển. Đóng hàng bằng container giúp hàng hóa được bảo quản tốt, tránh bị hư hỏng, đồng thời cũng giúp các doanh nghiệp giảm chi phí vận chuyển so với vận chuyển bằng đường hàng không. Mỗi container thường có dạng hộp được làm bằng kim loại, có kích thước khác nhau. Bài viết dưới đây sẽ giúp giải đáp từng loại container khác nhau như nào, các ký hiệu trên container có ý nghĩa ra sao,…

    Thiết bị đo lường - Dụng cụ cầm tay - Vật tư tiêu hao TECOSTORE

Căn giữa CSS 2 chiều: Hướng dẫn đầy đủ

  • Tác giả: doanhaiblog.com
  • Đánh giá: 5 ⭐ ( 4018 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Căn giữa CSS 2 chiều - Khi làm việc với CSS, chúng tôi nghĩ về các phần tử trang là các hộp và cách sắp xếp các hộp này thể hiện khái niệm về bố cục CSS.

Canh giữa theo cả chiều ngang và dọc trong CSS

  • Tác giả: webfaver.com
  • Đánh giá: 3 ⭐ ( 6887 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách canh giữa mọi thứ theo cả chiều dọc và chiều ngang bằng CSS, có thể áp dụng cho mọi loại element, layout,...

Cách Tính Thể Tích Hàng Hóa Đóng Vào Container Khi Vận Chuyển Bằng Đường Bộ

  • Tác giả: advantage.vn
  • Đánh giá: 3 ⭐ ( 1442 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách tính thể tích hàng hóa như thế nào để khi đóng vào container được đúng như kế hoạch sản xuất và số lượng sản phẩm giao cho KH. Nhiều trường hợp do tính thể tích hàng không đúng nên khi đóng hàng vào container không hết hoặc container còn nhiều khoảng trống. Điều này dẫn đến không tối ưu hiệu quả về mặt chi phí và khó khăn trong kế hoạch giao hàng cho khách.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Cách căn giữa A Div trong CSS (bốn cách khác nhau) - căn giữa trong css

By ads_php