Căn giữa các phần tử bằng CSS có vẻ khó hơn nhiều so với mức bình thường, đặc biệt nếu bạn cần căn giữa theo cả chiều ngang và chiều dọc. Hôm nay, tôi sẽ hướng dẫn bạn cách thực hiện, cả với CSS hiện đại và các kỹ thuật cũ hơn một chút (nhưng vẫn có liên quan).
Căn giữa các phần tử văn bản theo chiều ngang
Căn giữa văn bản theo chiều ngang là thẳng về phía trước. Chúng tôi sử dụng text-align và cung cấp cho nó một giá trị là center .
h1 {
text-align: center;
}Ở trên sẽ hoạt động trên mọi văn bản phần tử.
Phần tử khối ở giữa (không phải văn bản) theo chiều ngang
Để căn giữa bất kỳ phần tử không phải văn bản nào theo chiều ngang, chúng ta có thể sử dụng margin và cung cấp cho nó giá trị bên trái và bên phải của auto . Chúng tôi cũng cần chỉ định giá trị chiều rộng của phần tử:
.center-horizontal {
margin-left: auto;
margin-right: auto;
width: 100px; /* or max-content;*/
}
Lưu ý:nếu bạn không muốn cung cấp giá trị chiều rộng cố định cụ thể cho phần tử căn giữa của mình, bạn có thể sử dụng width: max-content - thì phần tử của bạn sẽ mở rộng theo chiều rộng của nội dung.
Block so với Inline Block Elements
.center-horizontal lớp trên sẽ căn giữa bất kỳ phần tử khối nào - nhưng không phải nội tuyến các yếu tố. Trong HTML, một số phần tử là phần tử nội tuyến theo mặc định. <button> chẳng hạn như phần tử có display: inline-block mặc định Phong cách. Nhưng bạn có thể dễ dàng biến nó thành một phần tử khối bằng cách chỉ cần thêm display: block vào lớp CSS của bạn:
.center-horizontal {
display: block;
margin-left: auto;
margin-right: auto;
width: 100px; /* or max-content;*/
}Bây giờ nó sẽ hoạt động trên bất kỳ phần tử nào.
Căn giữa theo chiều ngang với Flexbox
Với thuộc tính flexbox hiện đại, việc căn giữa theo chiều ngang là rất đơn giản. Thay thế .center-horizontal hiện tại của bạn lớp với cái này:
.center-horizontal {
display: flex;
justify-content: center;
}
Như bạn có thể thấy, <div> của bạn phần tử được căn giữa.
Nhưng vì một số lý do, phần tử nút của bạn thì không. Điều gì mang lại?
Chà, <button> phần tử là một phần tử đặc biệt không giống như <div> phần tử không được là cái gọi là flex-container.
Nhưng các nút có thể là một vật phẩm linh hoạt có nghĩa là nếu bạn đặt nút của mình bên trong hộp chứa linh hoạt, thì căn giữa sẽ hoạt động. Hãy thử thêm HTML sau vào trình chỉnh sửa của bạn:
<div class="center-horizontal">
<button>Center me</button>
</div>
Bây giờ nó hoạt động! Tôi vừa xóa lớp trung tâm khỏi phần tử nút và sử dụng nó bên trong một gói cha <div> thùng chứa.
Mẹo:<img> phần tử cũng không thể là một vùng chứa linh hoạt, nhưng nó có thể là một vật phẩm linh hoạt giống như các nút.
-
Phần tử ở giữa theo chiều dọc
Người mới bắt đầu CSS thường gặp vấn đề với việc căn giữa các phần tử theo chiều dọc. Flexbox làm cho điều này đơn giản, nhưng để có biện pháp tốt, trước tiên hãy xem cách nó hoạt động với các phương pháp CSS cũ hơn.
Bạn có thể nghĩ rằng bạn có thể sử dụng một cái gì đó như margin-top và margin-bottom auto - nhưng không.
Bạn cũng cần có một vùng chứa mẹ với chiều cao được chỉ định để làm cho việc căn giữa theo chiều dọc hoạt động. Thêm HTML sau vào trình chỉnh sửa của bạn:
<section class="section">
<div class="center-vertical">Center me vertically</div>
</section>Thêm CSS này cho lớp phần của bạn (cha):
.section {
height: 200px;
border: 1px solid black;
}Đường viền chỉ để giúp bạn dễ dàng xem những gì đang diễn ra hơn.
Bây giờ, hãy thêm CSS này cho phần tử con của bạn:
.center-vertical {
position: relative;
top: 50%;
transform: translateY(-50%);
}Đã xong!
Căn giữa theo chiều dọc với flexbox
Để căn giữa các phần tử theo chiều dọc với flexbox, chúng ta cần một vùng chứa flex chính. Bạn có thể xóa center-vertical lớp từ phần tử con của bạn từ ví dụ trước. Bây giờ, hãy thêm hai thuộc tính flexbox này vào .section của bạn lớp học, như thế này:
.section {
height: 200px;
border: 1px solid black;
display: flex;
align-items: center;
}Và bây giờ phần tử con của bạn được căn giữa theo chiều dọc với flexbox.
Phần tử trung tâm theo cả chiều dọc và chiều ngang
Để căn giữa các phần tử theo cả chiều dọc và chiều ngang, chúng ta chỉ cần thêm một vài thuộc tính. Hãy bắt đầu với phương pháp CSS cũ.
Đầu tiên hãy thêm đánh dấu này:
<section class="section">
<div class="center-vertical-and-horizontal">
Center me vertically & horizontally
</div>
</section>Và CSS
.section {
height: 200px;
border: 1px solid black;
}
.center-vertical-and-horizontal {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: max-content;
}
Như bạn có thể thấy, nó rất giống với ví dụ “phần tử trung tâm theo chiều dọc” (không có flexbox) trước đây. Ở đây chúng tôi chỉ thêm left: 50% khai báo và cho transform thuộc tính chúng tôi chỉ định cả trục X và Y trong một khai báo:(-50%, -50%) . Giá trị đầu tiên là X, giá trị thứ hai là Y.
Căn giữa theo chiều dọc và chiều ngang với flexbox
Cuối cùng, hãy thực hiện thủ thuật tương tự, sử dụng flexbox. Bạn có thể xóa center-vertical-and-horizontal lớp từ phần tử con của bạn. Bây giờ cho .section của bạn lớp sử dụng CSS sau:
.section {
height: 200px;
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
}
Sự khác biệt duy nhất giữa ví dụ này và trung tâm theo chiều dọc trước đó, là justify-content: center khai báo, xử lý công việc căn giữa theo chiều ngang.
Căn giữa theo chiều ngang &chiều dọc với CSS Grid
Để có biện pháp tốt, hãy xem cách thuộc tính lưới CSS hiện đại xử lý căn giữa theo chiều dọc và chiều ngang. Thay thế .section của bạn lớp với cái này:
.section {
height: 200px;
border: 1px solid black;
display: grid;
place-items: center;
}
Chỉ hai thuộc tính (display: grid &place-items:center ) thực hiện công việc với lưới CSS. Rất tiện lợi!
Rất tiếc, lưới CSS không tương thích trong tất cả các trình duyệt hiện đại và nó không hoạt động 100% trong nhiều CMS / khuôn khổ phổ biến, chẳng hạn như WordPress - chưa.
Xem trạng thái tương thích hiện tại của lưới CSS tại đây.