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

Việc căn giữa các mục bằng HTML và CSS 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.

Được rồi, bắt đầu thôi.

Đó 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ử div , chính là hộp màu đỏ mà chúng ta đang thấy ở đây.

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ử strong của chúng ta.

 strong { position: absolute; }

Bây giờ, để điều này hoạt động chính xác, div 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 { 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 div 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, inset-block-start với giá trị 50%. Và, để định vị từ bên trái, chúng ta có thể sử dụng inset-inline-start với cùng giá trị là 50%.

 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 div 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?

Nó thực sự rất dễ dàng. Chúng ta có thể sử dụng thuộc tính translate 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.

 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:

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 justify-content 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 align-items và cùng giá trị center.

 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:

Đ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 flex và yêu cầu ít mã hơn.

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ị display là grid . 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 justify-content: center và align-items: center . Nó hoạt động theo cùng một cách chính xác.

 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:

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ị.