⭐ 0
🔍
văn bản Hình ảnh PDF & Tài liệu Âm thanh Âm nhạc Điện tử Thời gian Tiện ích Trình xác nhận Huyền học Trò chơi

Cách căn giữa một Div trong CSS (Flexbox)

Xây dựng bố cục CSS flexbox một cách trực quan: flex-direction, right-content, căn chỉnh các mục, flex-wrap và khoảng cách trên vùng chứa, cùng với flex-grow, flex-shrink và flex-basis cho mỗi đứa trẻ, tất cả đều có bản xem trước trực tiếp và CSS có thể sao chép.

Đang xử lý... 0%

kết quả

Đây là câu trả lời trực tiếp cho câu hỏi được hỏi nhiều nhất trong CSS: để căn giữa một div, đặt display: flex, justify-content: center và căn lề-items: center trên phần tử mẹ của nó. Vậy là xong - ba khai báo trên vùng chứa và đứa trẻ nằm ở vị trí chính giữa hoàn hảo cả theo chiều ngang và chiều dọc bên trong nó, ở bất kỳ kích thước nào. Trang này mở trình tạo với chính xác sự kết hợp đó đã được áp dụng, do đó, bản xem trước bên dưới cho thấy nó hiện đang hoạt động trên ba hộp được đánh số.

Trước flexbox, việc căn giữa một div cần hack: lề: 0 tự động chỉ căn giữa theo chiều ngang và chỉ hoạt động trên khối có chiều rộng cố định; định tâm theo chiều dọc có nghĩa là vị trí: tuyệt đối với lề âm hoặc thủ thuật biến đổi, cả hai đều dễ vỡ khi nội dung thay đổi kích thước. just-content xử lý trục chính và các mục căn chỉnh xử lý trục chéo - chúng cùng nhau căn giữa theo cả hai hướng bất kể trẻ cao hay rộng, đó chính xác là lý do tại sao cặp này trở thành câu trả lời tiêu chuẩn.

Kéo bất kỳ điều khiển nào bên dưới và xem ba hộp xem trước luôn ở giữa khi vùng chứa thay đổi hình dạng hoặc thêm khoảng cách giữa chúng. Khi thấy ổn, hãy sao chép thẳng khối CSS ở dưới cùng vào biểu định kiểu của bạn — nó chạy theo cách giống nhau trong mọi trình duyệt hiện đại, không cần thư viện.

🛡️
Thực hiện trong trình duyệt

Các tập tin và dữ liệu đầu vào của bạn sẽ không bao giờ rời khỏi thiết bị này. Quá trình xử lý chạy hoàn toàn ngoại tuyến. An toàn 100%.

Định dạng và quy tắc được chấp nhận

  • Các điều khiển vùng chứa: hướng flex, nội dung đều, căn chỉnh các mục, flex-wrap và đầu vào khoảng cách tính bằng pixel, được áp dụng trực tiếp cho bản xem trước.
  • Theo mặc định, ba hộp con được mã hóa màu (thêm tối đa tám, xóa xuống còn hai), mỗi hộp có các trường flex-grow, flex-shrink và flex-basis riêng.
  • Khối CSS có thể sao chép với quy tắc .flex-container cộng với một quy tắc .flex-item-N cho mỗi thành phần con có thuộc tính flex không mặc định.

Lợi ích chính

✓ Mọi điều khiển vùng chứa và flex-grow, flex-shrink và flex-basis của mỗi đứa trẻ đều cập nhật trực tiếp ba hộp xem trước được đánh số, để bạn biết chính xác những quy tắc flexbox của mình thực hiện trước khi chạm vào biểu định kiểu.
✓ Trình tạo chỉ in các quy tắc con thực sự khác với các giá trị mặc định của CSS, do đó, mã được sao chép vẫn ngắn và dễ đọc thay vì đặt lại flex-grow: 0 trên mỗi hộp.
✓ Các trang đặt trước giải quyết bố cục mà mọi người tìm kiếm theo tên: căn giữa div, thanh điều hướng bên trái liên kết bên phải logo và các cột linh hoạt có chiều rộng bằng nhau — mở một cột và công cụ đã được định cấu hình.

Trường hợp sử dụng

  • • Nhận CSS chính xác để căn giữa div theo cả chiều ngang và chiều dọc bằng cách xem các mục căn chỉnh và nội dung căn chỉnh hoạt động trên các hộp xem trước trực tiếp.
  • • Xây dựng bố cục thanh điều hướng logo bên trái, liên kết bên phải với khoảng trắng ở giữa và căn chỉnh các mục: ở giữa, sau đó sao chép CSS vùng chứa thẳng vào thành phần tiêu đề của bạn.
  • • So sánh space-between, space-around và space-evenly cạnh nhau trên cùng ba ô thay vì đoán xem ô nào khớp với khoảng cách bạn muốn.