Tìm hiểu hai cách khác nhau để căn giữa layout trang web với CSS.
Giả sử bạn đang style layout bài viết cho website, và muốn căn giữa element <article> ngang chính giữa trang.
Bạn có thể làm theo vài cách. Cách đơn giản, kinh điển nhất để căn giữa element ngang là dùng thuộc tính CSS margin và set giá trị left và right thành auto.
Bạn có thể theo dõi dùng CodePen editor miễn phí.
Lấy HTML markup cơ bản cho layout article:
<article> <h1>Title for your article</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut dignissimos, doloribus accusantium provident nemo a voluptatibus nihil recusandae perferendis nesciunt quae illo cum eos dolore esse, architecto reprehenderit error. </p> </article>Và CSS declaration block sau:
article { max-width: 640px; margin-left: auto; margin-right: auto; }Điều này sẽ căn giữa layout article chính giữa webpage.
Thuộc tính max-width bắt buộc để căn giữa element ngang vì nếu không, text sẽ tự trải từ trái sang phải edge của trang.
Căn giữa ngang với Flexbox
Bạn cũng có thể căn giữa bằng property flexbox hiện đại. Do cách flexbox truyền property xuống child elements, cách đơn giản nhất căn giữa layout là wrap element <article> trong element khác, rồi thêm flexbox properties vào parent element mới đó.
Hãy wrap article element từ trước với element <main>:
<main> <article> <h1>Title for your article</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut dignissimos, doloribus accusantium provident nemo a voluptatibus nihil recusandae perferendis nesciunt quae illo cum eos dolore esse, architecto reprehenderit error. </p> </article> </main>Và chuyển flexbox properties (không phải max-width) từ declaration block article { } sang block main { } mới:
main { display: flex; flex-direction: column; justify-content: center; align-items: center; } article { max-width: 640px; }Điều này hoạt động y hệt declaration margin: auto bạn thấy trước đó.