[TỔNG HỢP] Kỹ thuật căn giữa trong CSS

Căn giữa mọi thứ trong CSS là một công việc mà bất kỳ lập trình viên Front end nào cũng phải làm. Nhưng rất nhiều người gặp khó trong vấn đề này.

Mình nghĩ vấn đề không phải là khó thực hiện căn giữa trong CSS, mà ở chỗ có rất nhiều cách thực hiện khác nhau, tùy thuộc vào tình huống, thế nên cũng thật khó để biết cách nào là tốt nhất.

Chính vì thế, hôm nay mình sẽ tổng hợp lại các kỹ thuật căn giữa trong CSS để giúp bạn tiện tra cứu.

Kỹ thuật căn giữa trong CSS

Tóm Tắt

I. Căn giữa theo chiều ngang

Căn giữa những thành phần theo chiều ngang trong CSS thì khá là đơn thuần :

I.1. Căn giữa nội dòng hoặc căn giữa phần tử inline

Bạn hoàn toàn có thể căn giữa những thành phần nội tuyến ( text hoặc link … ) theo chiều ngang của trong thành phần cha ( block-level ), bằng cách đặt vào thành phần cha đoạn code CSS này :

. center-children {

Bạn đang đọc: [TỔNG HỢP] Kỹ thuật căn giữa trong CSS

text-align: center;

}

Ví dụ: Căn giữa nội dung của thẻ p, hoặc thẻ a bên trong nav

Cách này sẽ hoạt động cho inline, inline-block, inline-table, inline-flex, v.v.

> Lưu ý: Nếu bạn không thấy được ví dụ trong Codepen thì bạn phải vào Codpen.io -> Vượt captcha -> Đăng nhập tài khoản -> Sau đó quay lại đây và bấm F5

I.2. Căn giữa phần tử block

Bạn hoàn toàn có thể căn giữa một thành phần block bằng cách thiết lập :

margin-left và margin-right thành auto

Và lưu ý là phải thiết lập width cho nó, nếu không thì chiều rộng của nó là 100% (bằng phần tử cha) và không cần căn giữa (Giải pháp này không áp dụng căn giữa cho nội dung bên trong nó)

Căn giữa theo cách này thường được viết tắt như thế này:

. center-block {

margin: 0 auto;

}

Ví dụ: Căn giữa thẻ div được đặt bên trong thẻ main.

Điều này sẽ hoạt động giải trí bất kể chiều rộng của thành phần block mà bạn đang căn giữa hay thành phần cha là bao nhiêu .

I.3. Căn giữa nhiều phần tử block

Nếu bạn có hai hoặc nhiều phần tử block cần được căn giữa theo chiều ngang trong một hàng, bạn có thể dễ dàng làm điều đó bằng cách đổi kiểu hiển thị (thuộc tính display).

Dưới đây là một ví dụ về sử dụng flexbox để căn giữa (cách làm này rất đơn giản và phổ biến nhất):

Nếu bạn vẫn muốn mỗi phần tử block là một hàng thì sử dụng margin: 0 atuo; vẫn tốt:

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

Căn giữa các phần tử theo chiều dọc trong CSS thì phức tạp hơn một chút.

Và nếu đó là inline hoặc inline-* element:

II.1. Căn giữa theo chiều dọc (sigle line)

Đôi khi, phần tử inline hoặc text có thể được căn giữa theo chiều dọc bằng cách sử dụng padding bằng nhau, ví dụ:

. center {

padding-top: 30 px;

padding-bottom: 30 px;

}

Ví dụ: Căn text ở giữa theo chiều dọc của thẻ a

Nếu không sử dụng padding vì một lý do nào đó, thì có một mẹo là làm cho chiều cao của dòng (line-height) bằng chiều cao của phần tử đó (nếu nội dung không dài và không cần xuống dòng).

Ví dụ: Nếu phần tử có height: 100px thì chúng ta đặt line-height là 100px để text bên trong đó tự động vào giữa theo chiều dọc.

II.2. Căn giữa theo chiều dọc (multipe lines)

Phần đệm (padding) bằng nhau ở trên và dưới cũng có thể tạo hiệu ứng căn giữa cho nhiều dòng văn bản.

Trong trường hợp này, bạn có thể sử dụng thuộc tính vertical-align cho kiểu table (thực hoặc được thay đổi display)

Nếu phần tử là table thì mặc định nó sẽ căn giữa ô bảng (table-cell).

Còn nếu bạn thiết lập từ CSS thì bạn cần phải chỉ định vertical-align: middle; như trong ví dụ sau:

Nếu trong trường hợp không hề biến nó thành table, có lẽ rằng bạn hoàn toàn có thể sử dụng flexbox :

. flex-center {

display: flex;

flex-direction: column;

justify-content: center;

}

Cách làm này đơn giản hơn rất nhiều.

Một phần tử flex con có thể được căn giữa trong một phần tử flex cha khá dễ dàng như sau:

> Lưu ý: Nó chỉ thực sự có liên quan nếu container mẹ có chiều cao cố định (px, %, v.v.), đó là lý do tại sao container ở đây có thiết lập chiều cao.

Nếu cả hai kỹ thuật này vì lý do nào đó mà không hiệu quả, bạn có thể sử dụng thủ thuật “Amazing Gút chóp” này:

Tạo một tử giả có độ cao 100 % được đặt bên trong container

Sau đó văn bản được chỉnh sửa theo chiều dọc với nó .

Nhìn chung kỹ thuật sẽ như thế này :

. container {

position: relative;

}

/ * Tạo thành phần giả * /

. container :: before {

content: ” “;

display: inline-block;

height: 100 %;

width: 1 %;

vertical-align:

middle

Xem thêm: React js là gì? Những điều cần biết và cơ hội việc làm ngành React js –

;

}

/ * Căn giữa dựa vào thành phần giả * /

. container p {

display: inline-block;

vertical-align: middle;

}

Ví dụ :

Còn nếu đó là block-level:

II.3. Căn giữa block-level nếu biết chiều cao

Khá thông dụng khi không biết chiều cao trong bố cục tổng quan website, vì nhiều nguyên do :

Chiều rộng biến hóa, văn bản không xuống hàng cũng hoàn toàn có thể đổi khác chiều cao. Sự khác nhau trong mẫu mã của văn bản hoàn toàn có thể đổi khác chiều cao .

Sự khác nhau về số lượng văn bản hoàn toàn có thể biến hóa chiều cao .

Các thành phần có tỷ suất khung hình cố định và thắt chặt, như hình ảnh, hoàn toàn có thể biến hóa chiều cao khi biến hóa size .
…

Nhưng nếu bạn đã biết chiều cao, bạn hoàn toàn có thể căn giữa theo chiều dọc như :

. parent {

position: relative;

}

. child {

position: absolute;

top: 50 %;

height: 100 px;

margin-top: – 50 px;

/ * Tính đến padding và border nếu không sử dụng box-sizing : border-box ; * /

}

Ví dụ :

II.4. Căn giữa block-level nếu chưa biết chiều cao

Nếu chưa biết chiều cao, bạn vẫn hoàn toàn có thể căn giữa nó bằng cách chuyển dời nó lên 50 % chiều cao của nó sau khi vận động và di chuyển nó xuống 50 % :

. parent {

position: relative;

}

. child {

position: absolute;

top: 50 %; / * Cách top 50 % * /

/ * Tại vị trí này, di dời lên trên theo chiều Y 50 % * /

transform: translateY(- 50 %);

}

Ví dụ :