Cách căn giữa một phần tử bằng CSS

Căn giữa một phần tử với CSS luôn dễ dàng đối với một số thứ, khó đối với những thứ khác. Dưới đây là danh sách đầy đủ về cách căn giữa với CSS, với các kỹ thuật CSS hiện đại

Căn giữa một phần tử trong CSS là một nhiệm vụ rất khác nếu bạn cần căn giữa theo chiều ngang hoặc chiều dọc.

Trong bài đăng này, tôi giải thích các tình huống phổ biến nhất và cách giải quyết chúng. Nếu một giải pháp mới được cung cấp bởiFlexboxTôi bỏ qua các kỹ thuật cũ bởi vì chúng tôi cần phải tiến lên phía trước, và Flexbox được hỗ trợ bởi các trình duyệt từ nhiều năm, bao gồm cả IE10.

Căn giữa theo chiều ngang

Bản văn

Văn bản rất đơn giản để căn giữa theo chiều ngang bằng cách sử dụngtext-aligntài sản được đặt thànhcenter:

p {
  text-align: center;
}

Khối

Cách hiện đại để căn giữa bất kỳ thứ gì không phải là văn bản là sử dụng Flexbox:

#mysection {
  display: flex;
  justify-content: center;
}

bất kỳ phần tử nào bên trong#mysectionsẽ được căn giữa theo chiều ngang.

Center horizontally


Đây là cách tiếp cận thay thế nếu bạn không muốn sử dụng Flexbox.

Bất kỳ thứ gì không phải là văn bản đều có thể được căn giữa bằng cách áp dụng một lề tự động sang trái và phải và đặt chiều rộng của phần tử:

section {
  margin: 0 auto;
  width: 50%;
}

ở trênmargin: 0 auto;là cách viết tắt của:

section {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
}

Hãy nhớ đặt mục này thànhdisplay: blocknếu đó là một phần tử nội tuyến.

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

Theo truyền thống, đây luôn là một nhiệm vụ khó khăn. Flexbox hiện cung cấp cho chúng tôi một cách tuyệt vời để thực hiện việc này theo cách đơn giản nhất có thể:

#mysection {
  display: flex;
  align-items: center;
}

bất kỳ phần tử nào bên trong#mysectionsẽ được căn giữa theo chiều dọc.

Center vertically

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

Kỹ thuật Flexbox để căn giữa theo chiều dọc và chiều ngang có thể được kết hợp để căn giữa hoàn toàn một phần tử trong trang.

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

Center both vertically and horizontally

Điều tương tự cũng có thể được thực hiện bằng cách sử dụngLưới CSS:

body {
  display: grid;
  place-items: center;
  height: 100vh;
}

Tải xuống miễn phí của tôiSổ tay CSS


Các hướng dẫn css khác: