3 cách dễ dàng để căn giữa một phần tử bằng CSS
Đường dẫn nhanh
⭐Tệp HTML đơn giản để thực hành căn giữa
⭐Sử dụng Flexbox để căn giữa phần tử Div
⭐Sử dụng CSS Grid để căn giữa phần tử Div
⭐Sử dụng tính năng Định vị CSS để căn giữa phần tử Div
Bài học chính
Việc tập trung các yếu tố trong thiết kế web đã từng là một nhiệm vụ khó khăn, nhưng CSS hiện đại lại tạo điều kiện dễ dàng căn chỉnh về trung tâm.
Flexbox đã nổi lên như một kỹ thuật chiếm ưu thế để căn chỉnh nội dung một cách tập trung, cung cấp một hệ thống lưới linh hoạt và có khả năng thích ứng, tạo điều kiện cho việc sắp xếp các phần tử một cách liền mạch.
Việc tập trung các thành phần trên một trang web có thể đạt được thông qua việc sử dụng cả CSS Grid và kỹ thuật định vị, mang lại độ chính xác cao trong việc kiểm soát việc sắp xếp và căn chỉnh nội dung.
Việc căn giữa một phần tử trong bố cục web từ lâu đã gây khó chịu cho các nhà thiết kế vì đây không phải lúc nào cũng là một nhiệm vụ dễ dàng đạt được. Tuy nhiên, nhiều thiết kế đòi hỏi các yếu tố phải được đặt ở trung tâm và may mắn thay, CSS hiện đại cung cấp sự hỗ trợ mạnh mẽ cho mục đích này.
Hiểu quy trình căn giữa div theo cả chiều ngang và chiều dọc bằng cách sử dụng flexbox, lưới CSS, cũng như các kỹ thuật định vị CSS truyền thống.
Một tệp HTML đơn giản để thực hành căn giữa
Các mẫu mã được cung cấp minh họa cách triển khai căn chỉnh theo chiều ngang thông qua việc sử dụng cấu trúc HTML cơ bản, đồng thời thao tác các thuộc tính CSS để tạo ra nhiều hiệu ứng khác nhau. Thử nghiệm với các bảng định kiểu khác nhau sẽ cung cấp cái nhìn sâu sắc về hành vi của các thuộc tính này.
<!DOCTYPE html>
<html>
<head>
<style>
div { width: 100px; height: 100px; }
body { height: calc(100vh-16px); }
</style>
</head>
<body>
<div></div>
</body>
</html>
Sử dụng Flexbox để căn giữa phần tử Div
Flexbox sử dụng một chiến lược đơn giản khiến nó trở thành lựa chọn ưu tiên do khả năng thích ứng của nó. Mô hình bố trí tạo điều kiện căn chỉnh và phân bổ không gian một cách dễ dàng, khiến nó trở thành giải pháp tối ưu để tập trung các thành phần trong một thùng chứa.
Tập trung nội dung bằng cách sử dụng flexbox bằng cách áp dụng các quy tắc CSS sau:
⭐ Gói phần tử div của bạn vào trong một vùng chứa. Áp dụng thuộc tính display: flex cho vùng chứa để kích hoạt bố cục Flexbox. Trong một trường hợp thử nghiệm đơn giản, phần thân có thể đóng vai trò là vật chứa:
body {
display: flex;
}
⭐ Sử dụng thuộc tính Simply-content và Align-items để căn chỉnh các mục lần lượt theo trục chính (ngang) và trục chéo (vertical). Để căn giữa cả hai trục, hãy đặt các thuộc tính này thành center. Đối với bản demo đơn giản, bạn cũng nên đặt chiều cao của phần thân là 100vh để có thể thấy tác dụng của việc căn chỉnh theo chiều dọc.
body {
justify-content: center;
align-items: center;
}
⭐ Cung cấp cho div màu nền để trực quan hóa vị trí của nó trên trang cuối cùng:
div { background-color: red; }
hướng từ trên xuống dưới và từ trái sang phải.
Sử dụng CSS Grid để căn giữa phần tử Div
Việc căn giữa một phần tử bằng CSS Grid mang lại độ chính xác cao trong việc kiểm soát bố cục và căn chỉnh, cho phép linh hoạt hơn trong việc thiết kế các trang web có cấu trúc phức tạp.
⭐ Xác định vùng chứa cho bố cục của bạn và áp dụng kiểu display:grid để kích hoạt CSS Grid. Trong trường hợp này, cơ thể đóng vai trò là vật chứa.
body {
display: grid;
}
⭐ Sử dụng các thuộc tính Grid-template-columns và Grid-template-rows để xác định cấu trúc lưới của bạn. Để căn giữa, một cột và một hàng là đủ, vì vậy hãy sử dụng 1fr cho cả hai.
body {
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
⭐ Sử dụng thuộc tính place-items để căn giữa nội dung của lưới, theo cả chiều ngang và chiều dọc.
body {
place-items: center;
}
⭐ Tạo kiểu cho nền của phần tử div để hiển thị nó ở giữa vùng chứa lưới.
div {
background-color: blue;
}
Trong trường hợp này, một thuộc tính duy nhất chi phối vị trí quan trọng nhất của phần tử Div trên trang web của bạn:
Sử dụng Định vị CSS để căn giữa phần tử Div
Việc căn giữa phần tử Div bằng thuộc tính CSS position đòi hỏi sự hiểu biết về cách hoạt động của các phép biến đổi và chuyển tiếp CSS. Sự hiểu biết này cho phép căn chỉnh chính xác phần tử trong vùng chứa chính của nó. Một quy trình chi tiết được cung cấp dưới đây cùng với một ví dụ minh họa.
⭐ Để định vị phần tử div, hãy đảm bảo vùng chứa của nó có vị trí tương đối. Điều này thiết lập bối cảnh định vị tương đối, do đó bạn có thể đặt div vào giữa vùng chứa của nó.
body {
position: relative;
}
⭐ Áp dụng định vị tuyệt đối cho phần tử div, sau đó sử dụng thuộc tính trên cùng và bên trái để định vị chính xác góc trên cùng bên trái của div ở giữa vùng chứa của nó.
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: green;
}
Phép biến đổi dịch (-50%,-50%) di chuyển div sang trái và hướng lên trên một nửa chiều rộng và một nửa chiều cao.
Cách tiếp cận này hoạt động bằng cách ban đầu căn chỉnh góc trên bên trái của phần tử với tâm của màn hình, sau đó dịch chuyển nó theo chiều ngang và chiều dọc tương ứng bằng một nửa chiều rộng và một nửa chiều cao của nó.
Flexbox, CSS Grid và CSS định vị là những kỹ thuật có hiệu quả cao để tập trung nội dung trên trang web. Bằng cách sử dụng Flexbox, người ta có thể dễ dàng đạt được sự định tâm theo chiều ngang và chiều dọc với mã hóa tối thiểu. CSS Grid cung cấp khả năng căn chỉnh mạnh mẽ theo hai chiều, trong khi việc sử dụng định vị CSS cho phép căn giữa một phần tử so với phần tử gốc chứa nó.
Bằng cách sử dụng các phương pháp như vậy, có thể đảm bảo giao diện tinh tế và bóng bẩy cho trang web của một người.