Căn giữa mọi thứ trong CSS bằng Flexbox

Căn giữa các phần tử trên một trang, đặc biệt là căn giữa theo chiều dọc, nổi tiếng là khó thực hiện trong quá khứ với CSS và ta đã phải giải quyết một số lỗi. Mặc dù vậy, rất may, Flexbox làm cho mọi thứ trở nên dễ dàng hơn và thay vào đó ta có thể tập trung năng lượng thiết kế của bạn vào các vấn đề cấp cao hơn.

Sau đây là một hướng dẫn rất đơn giản về căn giữa các phần tử bằng Flexbox.

Căn giữa theo chiều ngang

Hãy bắt đầu với một div chứa hai đoạn văn mà ta muốn căn giữa theo chiều ngang trên cùng một trục. Thật dễ dàng như sử dụng thuộc tính justify-content với giá trị ở giữa trên containers :

Hình ảnh ví dụ arrr!

Hình ảnh ví dụ 2 yeehaw!

<div class="box flex">   <p>     <img src="/images/pirate.svg" width="75">     arrr!   </p>   <p>     <img src="/images/cowboy.svg" width="75">     yeehaw!   </p> </div>

.box.flex {   display: flex;   justify-content: center; }  .box {   padding: .5rem;   height: 300px;   box-shadow: 2px 2px 5px rgba(0,0,0,0.03);   border-radius: 4px;    color: #84613D;   font-family: "Lucida Console", Monaco, monospace;   background: #FDF9EA;   border-bottom: 1px solid #F9F2D6;   border-right: 1px solid #F9F2D6; }  .box p {   max-width: 125px;   text-align: center;   background: rgba(255,255,255,0.5);   margin: .25rem;   padding: .25rem; }

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

Sức mạnh của Flexbox thực sự tỏa sáng khi ta cũng cần căn giữa các phần tử theo chiều dọc. Đây là ví dụ của ta , nhưng với các mục flex cũng được căn giữa theo chiều dọc:

.box.flex {   display: flex;   justify-content: center;   align-items: center; }

Hình ảnh ví dụ arrr!

Hình ảnh ví dụ yeehaw!

Nếu bạn chỉ muốn các mục linh hoạt cụ thể được căn giữa theo chiều dọc, bạn có thể đặt tự căn chỉnh trên các mục đó:

.flex p:last-child {   align-self: center; }

Hình ảnh ví dụ arrr!

Hình ảnh ví dụ yeehaw!

Căn giữa theo chiều dọc trên toàn bộ trang

Nếu bạn muốn đặt một phần tử ở giữa trang, có thể hơi phức tạp hơn một chút vì các mục flex sẽ chỉ căn giữa theo chiều dọc theo chiều cao của containers của chúng. Điều đó nghĩa là bản thân containers cần có cùng chiều cao với chính trang đó. Điều đó đủ dễ dàng để thực hiện bằng cách sử dụng các đơn vị khung nhìn , trong đó 100vh là 100% chiều cao của khung nhìn.

Đây là một ví dụ đơn giản:

<!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">      <title>Dead center!</title>     <style>       body {         margin: 0;       }        .center-me {         display: flex;         justify-content: center;         align-items: center;          height: 100vh;       }     </style>   </head>   <body>      <div class="center-me">       <p>😇 Bonjour center!</p>     </div>    </body> </html>

Cũng lưu ý ta đảm bảo đặt lại lề của trang về 0, nếu không bạn sẽ phải cuộn một chút.

Tags:

Các tin liên quan

Triển khai một CSS thuần túy có thể thu gọn
2020-05-02
Tham chiếu phông chữ hệ thống CSS
2020-03-29
Sử dụng Thuộc tính chiều cao dòng CSS để cải thiện khả năng đọc
2020-02-04
Cách sử dụng CSS: root Pseudo-Class Selector
2020-01-15
Khi nào bạn nên sử dụng quy tắc CSS! Important?
2020-01-14
Thủ thuật sử dụng CSS translateZ () và phối cảnh ()
2019-12-13
Cách hiển thị CSS trên server ứng dụng React
2019-12-12
Cách tạo Thư viện ảnh cuộn vô hạn với React và CSS Grid
2019-12-12
Cách tạo node tải xuống với các tương tác nhỏ với CSS, anime.js và segment.js
2019-12-12
Cách giải quyết tắc nghẽn CSS quy mô lớn với ITCSS và BEM
2019-12-12