Việc căn giữa các mục bằng   trước đây khá khó thực hiện. Vâng, nó không còn nữa. Có nhiều cách khác nhau để làm điều đó bây giờ. Và đó là điều tốt vì chúng ta có thể cần những lựa chọn khác nhau trong những tình huống khác nhau. Trong video này, chúng ta sẽ xem xét ba cách ưa thích của tôi để căn giữa các mục, Chúng ta sẽ sử dụng định vị, sau đó chúng ta sẽ sử dụng flexbox và cuối cùng, chúng ta sẽ sử dụng lưới CSS truy cập của tôi. HTML và CSS  Được rồi, bắt đầu thôi.   https://youtu.be/XMH4c1xIZtE?embedable=true  Đó thực sự là một điều kỳ lạ đến mức rất khó để đặt các mục vào giữa một thùng chứa trên Web trong một thời gian dài. Chà, việc căn giữa theo chiều ngang thì dễ dàng, nhưng việc căn giữa theo chiều dọc gần như là không thể cho đến những năm gần đây.  Sử dụng Định vị CSS cho các mục ở giữa  Phương pháp đầu tiên này, sử dụng định vị CSS, có lẽ đã tồn tại lâu nhất nhưng nó đã phát triển một chút khi các thuộc tính mới hơn xuất hiện. Hãy xem một ví dụ.  Ở đây chúng ta có hộp này mà chúng ta muốn căn giữa trong vùng chứa khác có viền màu đỏ. Đó là một phần tử mạnh và được đặt trực tiếp bên trong phần tử   , chính là hộp màu đỏ mà chúng ta đang thấy ở đây.  div  Chúng ta sẽ sử dụng định vị tuyệt đối cho phương pháp này vì vậy hãy thêm nó vào phần tử   của chúng ta. strong   strong { position: absolute; }  Bây giờ, để điều này hoạt động chính xác,   của chúng ta sẽ cần tạo bối cảnh định vị cho mục của chúng ta được định vị trên đó. Có nhiều cách khác nhau để làm điều này nhưng lựa chọn tốt nhất cho ví dụ này là sử dụng vị trí tương đối. div   div { position: relative; }  Bây giờ chúng ta có thể định vị phần tử của mình ở mức thấp hơn 50% chiều cao của   và hơn 50% chiều rộng. Để định vị từ trên xuống, chúng ta có thể sử dụng thuộc tính logic mới,   với giá trị 50%. Và, để định vị từ bên trái, chúng ta có thể sử dụng   với cùng giá trị là 50%. div inset-block-start inset-inline-start     strong { ... inset-block-start: 50%; inset-inline-start: 50%; }  Được rồi, vậy là nó không chính xác ở giữa phải không?  Chà, điều này là do chúng tôi đã định vị mục ở giữa   nhưng vị trí của nó dựa trên góc trên cùng bên trái của nó. Những gì chúng ta cần làm bây giờ là dịch chuyển vật phẩm lên phía sau 50% chiều cao và lùi lại hơn 50% chiều rộng. Điều này sẽ làm cho nó được đặt đúng ở trung tâm. Nhưng, làm thế nào chúng ta có thể làm điều này? div  Nó thực sự rất dễ dàng. Chúng ta có thể sử dụng thuộc tính   CSS mới. Giá trị đầu tiên sẽ dịch dọc theo trục x. Chúng ta cần quay lại 50%, vì vậy chúng ta sẽ cộng giá trị âm 50%. Và, giá trị thứ hai dịch dọc theo trục y, chúng ta sẽ cho nó cùng giá trị âm 50 phần trăm. translate     strong { ... translate: -50% -50%; }  Và chúng ta bắt đầu. Tập trung hoàn hảo.  Đây là ví dụ hoạt động cuối cùng sử dụng định vị và dịch thuật:   https://codepen.io/brianmtreese/pen/PoLYmKW?embedable=true  Vì vậy, đây là một cách chúng ta có thể làm, nhưng nó không phải là cách tôi thích nhất.  Sử dụng Flexbox để căn giữa các mục  Nếu có thể, tôi thích sử dụng Flexbox hơn định vị vì nó thậm chí còn dễ dàng hơn, yêu cầu ít dòng mã hơn, không cần bối cảnh định vị và thành thật mà nói, nó giống như một giải pháp tốt hơn, hiện đại hơn. Hãy xem một ví dụ.  Được rồi, vậy là chúng ta đang bắt đầu từ cùng một điểm, chúng ta có div bên ngoài có viền màu đỏ và sau đó là phần tử mạnh bên trong.   Chúng ta bắt đầu bằng cách biến div của mình thành một thùng chứa linh hoạt có màn hình, flex. Sau đó, chúng ta có thể căn chỉnh mục của mình vào giữa dọc theo trục x với thuộc tính   và giá trị center. Và cuối cùng nhưng không kém phần quan trọng, chúng ta có thể căn chỉnh dọc theo trục y với thuộc tính   và cùng giá trị center. justify-content align-items     div { display: flex; justify-content: center; align-items: center; }  Và bạn đã thấy nó, mục này đã được căn giữa chính xác và lần này chỉ mất ba dòng mã để đến được đó.  Đây là ví dụ hoạt động cuối cùng bằng Flexbox:   https://codepen.io/brianmtreese/pen/bGZbWgW?embedable=true  Điều đó thật tuyệt và đôi khi tôi cũng có nhu cầu làm điều này, nhưng cách yêu thích của tôi để định vị các mục ở giữa là sử dụng lưới CSS. Và một lần nữa, lý do của tôi cho điều này là vì nó thậm chí còn dễ dàng hơn   và yêu cầu ít mã hơn. flex  Sử dụng lưới để căn giữa các mục  Được rồi, điểm bắt đầu tương tự với hộp màu đỏ và vật phẩm bên trong.   Lần này chúng ta sẽ biến div của mình thành một thùng chứa lưới có giá trị   là   . Bây giờ điều thú vị ở đây là chúng ta có thể sử dụng cùng hai thuộc tính mà chúng ta đã sử dụng cho ví dụ flexbox nếu muốn. Chúng ta có thể thêm   và   . Nó hoạt động theo cùng một cách chính xác. display grid justify-content: center align-items: center   div { display: grid; justify-content: center; align-items: center; }  Hơi buồn cười nhưng đó chỉ là cách hoạt động của lưới, nó có thể sử dụng các thuộc tính căn chỉnh hộp giống như flexbox. Nhưng nếu chúng ta cứ thế này thì việc sử dụng lưới sẽ không có lợi ích gì phải không?  Chà, thay vào đó, điều chúng ta có thể làm là xóa các thuộc tính căn chỉnh này và thay thế chúng bằng thuộc tính place-items. Và chúng ta có thể gán cho thuộc tính này một giá trị trung tâm.     div { display: grid; place-items: center; }  Thế là xong, bây giờ chúng tôi đã rút gọn nó xuống chỉ còn hai dòng CSS.  Đây là ví dụ hoạt động cuối cùng sử dụng CSS Grid:   https://codepen.io/brianmtreese/pen/zYbOwoM?embedable=true  Phần kết luận  Vì vậy, như tôi đã nói trước đó, chắc chắn là nó dễ dàng hơn rất nhiều so với trước đây. Nhưng tất cả các kỹ thuật này vẫn rất phù hợp và có thể cần thiết trong bất kỳ trường hợp nào, vì vậy tốt nhất bạn nên biết tất cả chúng để đề phòng. Tôi chắc chắn sẽ thích số lượng lưới CSS ít mã nhất và nếu điều đó không hoạt động thì flexbox điều tốt nhất tiếp theo và nếu cả hai cách đó đều không hoạt động, hãy thử định vị.  Cũng được xuất bản   . ở đây

Buy Me a Coffee

Nghe bài viết này bằng Tiếng Anh, đọc bởi robot thông minh của HackerNoon

3 kỹ thuật CSS hiện đại để căn giữa các mục

About Author

BÌNH LUẬN

chuyên mục

BÀI VIẾT NÀY CŨNG CÓ MẶT TẠI

Related Stories

240 Stories To Learn About Astounding Stories

223 Stories To Learn About Science

184 Stories To Learn About Psychology

287 Stories To Learn About Blockchain Development

240 Stories To Learn About Astounding Stories

223 Stories To Learn About Science

184 Stories To Learn About Psychology

287 Stories To Learn About Blockchain Development

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps