Cách căn giữa mọi thứ bằng CSS - Căn chỉnh Div, Text, v.v.

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 ta sẽ xem xét 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 yếu tố theo chiều ngang thường dễ hơn 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 text-aligntính với giá trị center:

Hello, (centered) World!

p { text-align: center; }

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

Sử dụng thuộc tính tốc ký margincó giá trị 0 autođể căn giữa các phần tử cấp khối như divchiều ngang:

.child { ... margin: 0 auto; }

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

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: flexjustify-content: centercho phần tử mẹ:

.container { ... display: flex; justify-content: center; }

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

Căn giữa các yếu 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 trước tiên, sau đó chỉ cho bạn cách thực hiện với Flexbox.

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

Trong một thời gian dài, đây là cách phổ biến để 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 displaytính của phần tử mẹ thành relative.

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

.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically */ position: absolute; top: 50%; }

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, hãy đặt thuộc margin-toptính thành -(half the child element's height):

.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically */ position: absolute; top: 50%; margin-top: -25px; /* half this element's height */ }

Cách căn giữa một dãy 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 thậm chí nếu bạn làm vậy), phương pháp này là một thủ thuật tiện lợi.

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

Đối với phần tử con, hãy đặt thuộc displaytính thành absolutevà đặt topthà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 transform: translate(0, -50%):

.container { ... position: relative; } .child { ... position: absolute; top: 50%; transform: translate(0, -50%); }

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 transform: 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: flexalign-items: centercho phần tử mẹ:

.container { ... display: flex; align-items: center; }

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

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

Đ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 displaytính của phần tử mẹ thành relative.

Sau đó thiết lập của trẻ displaytài sản để absolute, topđến 50%, và leftđể 50%. Điều 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 bằng một nửa chiều rộng của phần tử con:

.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically and horizontally */ position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; /* apply negative top and left margins to truly center the element */ }

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

Use this method to center an element vertically and horizontally if you don't know its exact dimensions and can't use Flexbox.

First, set the display property of the parent element to relative.

Next, set the child element's display property to absolute, top to 50%, and left to 50%.

Finally, use transform: translate(-50%, -50%) to truly center the child element:

.container { ... position: relative; } .child { ... position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

How to Center a Div Vertically and Horizontally with Flexbox

Flexbox is the easiest way to center an element both vertically and horizontally.

This is really just a combination of the two previous Flexbox methods. Then apply justify-content: center and align-items: center to center the child element(s) horizontally and vertically:

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

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