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.
I. Căn giữa theo chiều ngang
Căn giữa các phần tử theo chiều ngang trong CSS thì khá là đơn giản:
I.1. Căn giữa nội dòng hoặc căn giữa phần tử inline
Bạn có thể căn giữa các phần tử nội tuyến (text hoặc link...) theo chiều ngang của trong phần tử cha (block-level), bằng cách đặt vào phần tử cha đoạn code CSS này:
.center-children {
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 có thể căn giữa một phần tử 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 bất kể chiều rộng của phần tử block mà bạn đang căn giữa hay phần tử 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: 30px;
padding-bottom: 30px;
}
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 thể biến nó thành table, có lẽ bạ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ó chiều cao 100% được đặt bên trong container
-
Sau đó văn bản được căn chỉnh theo chiều dọc với nó.
Nhìn chung kỹ thuật sẽ như thế này:
.container {
position: relative;
}
/* Tạo phần tử giả */
.container::before {
content: " ";
display: inline-block;
height: 100%;
width: 1%;
vertical-align: middle;
}
/* Căn giữa dựa vào phần tử 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á phổ biến khi không biết chiều cao trong bố cục trang web, vì nhiều lý do:
-
Chiều rộng thay đổi, văn bản không xuống hàng cũng có thể thay đổi chiều cao. Sự khác nhau trong kiểu dáng của văn bản có thể thay đổi chiều cao.
-
Sự khác nhau về số lượng văn bản có thể thay đổi chiều cao.
-
Các phần tử có tỷ lệ khung hình cố định, như hình ảnh, có thể thay đổi chiều cao khi thay đổi kích thước.
-
...
Nhưng nếu bạn đã biết chiều cao, bạn có thể căn giữa theo chiều dọc như:
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
/* 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 có thể căn giữa nó bằng cách di chuyển nó lên 50% chiều cao của nó sau khi 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, dịch chuyển lên trên theo chiều Y 50% */
transform: translateY(-50%);
}
Ví dụ:
II.4. Căn giữa block-level theo chiều dọc với flexbox
Căn giữa theo chiều dọc một block-level rất dễ dàng với flexbox.
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
Ví dụ:
Bạn cũng có thể căn giữa trong flexbox bằng cách sử dụng margin: auto; trên phần tử con.
III. Căn giữa theo cả chiều ngang và chiều dọc trong CSS
Bạn có thể kết hợp các kỹ thuật trên theo bất kỳ cách nào để có được các yếu tố chính giữa một cách hoàn hảo.
Tuy nhiên, ba nhóm này là cách thường làm:
III.1. Căn giữa hoàn toàn nếu chiều rộng và chiều cao là cố định
Nếu chiều rộng và chiều cao là cố định, chúng ta có thể sử dụng margin âm bằng một nửa chiều rộng và chiều cao đó.
Sau đó position: absolute và dịch chuyển top: 50% và left: 50% để căn giữa nó với sự hỗ trợ tốt trên nhiều trình duyệt.
Về cơ bản là như thế này:
.parent {
position: relative;
}
.child {
width: 200px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -120px;
}
Ví dụ:
III.2. Căn giữa hoàn toàn nếu chưa biết chiều rộng và chiều cao
Nếu bạn không biết chiều rộng hoặc chiều cao, bạn có thể sử dụng thuộc tính transform và translate -50% theo cả hai hướng (dựa trên chiều rộng / chiều cao hiện tại của phần tử) để căn giữa:
.parent {
position: relative;
}
.child {
position: absolute;
/* Dịch chuyển 50% theo theo phần tử định vị*/
top: 50%;
left: 50%;
/* Dịch chuyển ngược lại 50% theo chiều rộng và chiều cao */
transform: translate(-50%, -50%);
}
Ví dụ:
III.3. Căn giữa hoàn toàn với flexbox
Để căn giữa theo cả hai hướng với flexbox, bạn cần sử dụng hai thuộc tính căn giữa như thế này:
.parent {
display: flex;
justify-content: center;
align-items: center;
}
Ví dụ:
III.4. Căn giữa hoàn toàn với Grid
Hoặc bạn cũng có thể sử dụng tính năng CSS GRID để căn giữa hoàn toàn.
body,
html {
height: 100%;
/* Thay đổi kiểu hiển thị thành GRID */
display: grid;
}
span {
/* Căn giữa phần tử cần căn giữa */
margin: auto;
}
Ví dụ:
Tổng kết về căn giữa trong CSS
Đó, đó là tất cả các kỹ thuật căn giữa trong CSS mà mình nghĩ đầy đủ để bạn sử dụng.
Hi vọng nó giúp ích trong quá trình học lập trình Front end của bạn.
> Nếu bạn yêu thích mảng Front end và muốn học để đi thực tập / đi làm sớm thì tham gia HỌC FRONT END ngay đi thôi!
---
HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI
Học Lập trình chất lượng cao (Since 2002). Học thực tế + Tuyển dụng ngay!
Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT: 02435574074 - 0383.180086
Email: hello@niithanoi.edu.vn
Fanpage: https://facebook.com/NIIT.ICT/
#niit #icthanoi #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python