Căn giữa elements với CSS có vẻ khó hơn nên, đặc biệt nếu cần căn giữa cả ngang và dọc. Hôm nay tôi chỉ cách làm, cả với modern CSS và techniques cũ hơn (vẫn relevant).
Căn giữa text elements ngang
Căn giữa text ngang straight forward. Dùng property text-align giá trị center.
h1 { text-align: center; }Trên sẽ work trên bất kỳ text element nào.
Căn giữa block elements (non-text) ngang
Để căn giữa bất kỳ non-text element nào ngang, dùng property margin giá trị left và right auto. Cũng cần specify width value của element:
.center-horizontal { margin-left: auto; margin-right: auto; width: 100px; /* or max-content;*/ }Lưu ý: nếu không muốn fixed width value cho centered element, dùng width: max-content — element sẽ expand đến width của content nó.
Block vs. Inline Block Elements
Class .center-horizontal trên sẽ center bất kỳ block element nào — nhưng không phải inline elements. Trong HTML, một số elements là inline elements mặc định. Element <button> ví dụ, có default display: inline-block style. Nhưng bạn dễ dàng làm nó block element bằng cách thêm display: block vào CSS class:
.center-horizontal { display: block; margin-left: auto; margin-right: auto; width: 100px; /* or max-content;*/ }Giờ work trên bất kỳ element nào.
Căn giữa ngang với Flexbox
Với modern flexbox property, căn giữa ngang dead simple. Thay thế class .center-horizontal hiện tại bằng:
.center-horizontal { display: flex; justify-content: center; }Như bạn thấy, <div> element được căn giữa.
Nhưng vì lý do nào đó, button element không. Tại sao?
Vâng, element <button> là special element mà khác <div> element không thể là so-called flex-container.
Nhưng buttons có thể là flex-item nghĩa là nếu bạn đặt button bên trong flex-container, thì centering sẽ work. Thử thêm HTML sau vào editor:
<div class="center-horizontal"> <button>Center me</button> </div>Giờ work! Tôi chỉ remove center class từ button element và dùng nó bên trong wrapping parent <div> container.
Mẹo: element <img> cũng không thể là flex-container, nhưng có thể là flex-item như buttons.
-
Căn giữa elements dọc
CSS beginners thường gặp khó căn giữa elements dọc. Flexbox làm đơn giản, nhưng để good measure, hãy xem cách work với older CSS methods trước.
Bạn có thể nghĩ dùng margin-top và margin-bottom auto — nhưng không.
Bạn cũng cần parent container với specified height để vertical centering work. Thêm HTML sau vào editor:
<section class="section"> <div class="center-vertical">Center me vertically</div> </section>Thêm CSS cho section class (parent):
.section { height: 200px; border: 1px solid black; }Border chỉ để dễ thấy chuyện gì xảy ra.
Giờ thêm CSS cho child element:
.center-vertical { position: relative; top: 50%; transform: translateY(-50%); }Xong!
Căn giữa dọc với flexbox
Để căn giữa elements dọc với flexbox, cần parent flex container. Bạn có thể remove class center-vertical từ child element ví dụ trước. Giờ thêm hai flexbox properties vào class .section:
.section { height: 200px; border: 1px solid black; display: flex; align-items: center; }Và bây giờ child element vertically centered với flexbox.
Căn giữa element cả dọc và ngang
Để căn giữa elements cả dọc và ngang chỉ cần thêm vài properties. Bắt đầu với old CSS method.
Thêm markup 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 thấy, rất giống ví dụ "center elements vertically" (không flexbox) trước. Ở đây chỉ thêm declaration left: 50%, và cho property transform chỉ định cả X và Y axis trong một declaration: (-50%, -50%). Giá trị đầu là X, thứ hai là Y.
Căn giữa dọc và ngang với flexbox
Cuối cùng, làm same trick, dùng flexbox. Bạn có thể remove class center-vertical-and-horizontal từ child element. Giờ cho class .section CSS sau:
.section { height: 200px; border: 1px solid black; display: flex; align-items: center; justify-content: center; }Khác biệt duy nhất giữa này và center vertically example trước, là declaration justify-content: center handle horizontal centering job.
Căn giữa ngang & dọc với CSS Grid
Cho good measure, xem modern-modern CSS grid property handle vertical và horizontal centering như thế nào. Thay thế class .section bằng:
.section { height: 200px; border: 1px solid black; display: grid; place-items: center; }Chỉ hai properties (display: grid & place-items:center) làm việc với CSS grid. Rất convenient!
Thật đáng tiếc, CSS grid không compatible tất cả modern browsers, và không work 100% trong nhiều CMS/frameworks phổ biến, như WordPress — chưa.
Xem CSS grid current compatibility status ở đây.