Căn giữa trong CSS

Hãy làm theo 5 kỹ thuật căn giữa khi chúng trải qua một loạt thử nghiệm để xem kỹ thuật nào có khả năng thích ứng với thay đổi tốt nhất.

Việc căn giữa trong CSS là một thử thách nổi tiếng, đầy những câu chuyện đùa và chế giễu. CSS năm 2020 đã trưởng thành và giờ đây, chúng ta có thể cười thoải mái với những câu chuyện cười đó, chứ không phải cắn răng cười.

Nếu bạn thích xem video, hãy xem phiên bản video của bài đăng này trên YouTube:

Thách thức

Có nhiều kiểu căn giữa. Từ các trường hợp sử dụng khác nhau, số lượng nội dung cần căn giữa, v.v. Để minh hoạ lý do đằng sau một kỹ thuật căn giữa "thắng lợi", tôi đã tạo ra The Resilience Ringer. Đây là một loạt các bài kiểm thử căng thẳng cho từng chiến lược căn giữa để cân bằng và bạn có thể quan sát hiệu suất của các chiến lược đó. Cuối cùng, tôi sẽ tiết lộ kỹ thuật đạt điểm cao nhất cũng như "có giá trị nhất". Hy vọng bạn đã nắm được các kỹ thuật và giải pháp căn giữa mới.

Chuông báo khả năng phục hồi

Chuông báo độ bền là minh chứng cho niềm tin của tôi rằng chiến lược căn giữa phải linh hoạt với các bố cục quốc tế, khung nhìn có kích thước biến đổi, nội dung chỉnh sửa văn bản và nội dung động. Những nguyên tắc này đã giúp hình thành các thử nghiệm về khả năng phục hồi sau đây để các kỹ thuật căn giữa có thể tồn tại:

  1. Bị vỡ: Việc căn giữa có thể xử lý các thay đổi về chiều rộng
  2. Bị vỡ: Việc căn giữa có thể xử lý các thay đổi về chiều cao
  3. Trùng lặp: Việc căn giữa phải linh động theo số lượng mục
  4. Chỉnh sửa: Việc căn giữa phải linh động theo độ dài và ngôn ngữ của nội dung
  5. Luồng: Việc căn giữa phải không phụ thuộc vào hướng tài liệu và chế độ ghi

Giải pháp chiến thắng phải thể hiện khả năng phục hồi bằng cách giữ nội dung ở giữa trong khi bị vắt, nén, sao chép, chỉnh sửa và hoán đổi sang nhiều chế độ và hướng ngôn ngữ. Trung tâm đáng tin cậy và linh hoạt, một trung tâm an toàn.

Chú giải

Tôi đã cung cấp một số gợi ý về màu sắc trực quan để giúp bạn giữ một số thông tin siêu dữ liệu trong ngữ cảnh:

  • Đường viền màu hồng cho biết quyền sở hữu kiểu căn giữa
  • Hộp màu xám là nền trên vùng chứa, nhằm mục đích căn giữa các mục
  • Mỗi phần tử con có màu nền trắng để bạn có thể thấy mọi hiệu ứng mà kỹ thuật căn giữa có trên kích thước hộp con (nếu có)

5 thí sinh

5 kỹ thuật căn giữa sẽ tham gia vòng loại Resilience Ringer, chỉ một kỹ thuật sẽ nhận được Resilience Crown 👸.

1. Trung tâm nội dung

Chỉnh sửa và sao chép nội dung bằng VisBug
  1. Squish: Tuyệt!
  2. Bóng quần: tuyệt vời!
  3. Trùng lặp: tuyệt vời!
  4. Chỉnh sửa: tuyệt vời!
  5. Flow: tuyệt vời!

Rất khó để đánh bại tính ngắn gọn của display: grid và ký hiệu viết tắt place-content. Vì căn giữa và căn chỉnh hợp lý các phần tử con, nên đây là một kỹ thuật căn giữa chắc chắn cho các nhóm phần tử cần đọc.

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}
Ưu điểm
  • Nội dung được căn giữa ngay cả khi không gian bị hạn chế và tràn nội dung
  • Tất cả các nội dung chỉnh sửa và bảo trì đều tập trung ở một nơi
  • Gap đảm bảo khoảng cách bằng nhau giữa n phần tử con
  • Lưới tạo các hàng theo mặc định
Nhược điểm
  • Phần tử con rộng nhất (max-content) sẽ đặt chiều rộng cho tất cả phần tử con còn lại. Chúng ta sẽ thảo luận thêm về vấn đề này trong phần Chuyển động nhẹ.

Rất phù hợp với bố cục vĩ mô chứa các đoạn văn và dòng tiêu đề, nguyên mẫu hoặc nói chung là những nội dung cần được căn giữa dễ đọc.

2. Độ cong nhẹ

  1. Squish: tuyệt vời!
  2. Cầu lông: tuyệt vời!
  3. Sao chép: tuyệt vời!
  4. Chỉnh sửa: tuyệt vời!
  5. Flow: tuyệt vời!

Gentle Flex là chiến lược chỉ căn giữa đúng nghĩa hơn. Cách này mềm mại và nhẹ nhàng, vì không giống như place-content: center, không có kích thước hộp nào của phần tử con cháu thay đổi trong quá trình căn giữa. Tất cả các mục được xếp chồng, căn giữa và giãn cách một cách nhẹ nhàng nhất có thể.

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}
Ưu điểm
  • Chỉ xử lý việc căn chỉnh, hướng và phân phối
  • Tất cả nội dung chỉnh sửa và bảo trì đều ở cùng một nơi
  • Gap đảm bảo khoảng cách bằng nhau giữa n phần tử con
Nhược điểm
  • Hầu hết các dòng mã

Phù hợp với cả bố cục vĩ mô và vi mô.

3. Autobot

  1. Squish: rất tốt
  2. Bóng quần: tuyệt vời
  3. Trùng lặp: được
  4. Chỉnh sửa: tuyệt vời
  5. Luồng: rất tốt

Vùng chứa được đặt thành flex không có kiểu căn chỉnh, trong khi các thành phần con trực tiếp được tạo kiểu bằng lề tự động. Có một điều gì đó hoài niệm và tuyệt vời về việc margin: auto hoạt động trên tất cả các cạnh của phần tử.

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}
Ưu điểm
  • Trò vui
  • Nhanh và không chính xác
Nhược điểm
  • Kết quả khó coi khi tràn
  • Việc dựa vào phân phối thay vì khoảng trống có nghĩa là bố cục có thể xảy ra khi các thành phần con chạm vào các cạnh
  • Việc "đẩy" vào vị trí có vẻ không tối ưu và có thể dẫn đến thay đổi kích thước hộp của thành phần con

Rất phù hợp để căn giữa các biểu tượng hoặc phần tử giả.

4. Trung tâm Fluffy

  1. Squish: kém
  2. Bóng quần: xấu
  3. Trùng lặp: không tốt
  4. Chỉnh sửa: tuyệt vời!
  5. Flow: tuyệt vời! (miễn là bạn sử dụng các thuộc tính logic)

"Fluffy center" (trung tâm bông xốp) là ứng cử viên ngon nhất cho đến nay và là kỹ thuật căn giữa duy nhất hoàn toàn thuộc quyền sở hữu của phần tử/phần tử con. Bạn có thấy đường viền màu hồng bên trong của chúng tôi không?

.fluffy-center {
  padding: 10ch;
}
Ưu điểm
  • Bảo vệ nội dung
  • Nguyên tử
  • Mọi kiểm thử đều ẩn chứa chiến lược căn giữa này
  • Khoảng trắng giữa các từ là khoảng trống
Nhược điểm
  • Ảo tưởng về việc không hữu ích
  • Có sự xung đột giữa vùng chứa và các mục, tất nhiên vì mỗi mục đều rất chắc chắn về kích thước của chúng

Rất phù hợp với việc căn giữa từ hoặc cụm từ, thẻ, viên nang, nút, khối và nhiều nội dung khác.

5. Pop & Plop

  1. Squish: ok
  2. Squash: ok
  3. Trùng lặp: không tốt
  4. Chỉnh sửa: tốt
  5. Flow: ổn

Điều này "nổi lên" vì vị trí tuyệt đối sẽ đẩy phần tử ra khỏi luồng thông thường. Phần "plop" trong tên bắt nguồn từ thời điểm tôi thấy nó hữu ích nhất: đặt nó lên trên các nội dung khác. Đây là một kỹ thuật cổ điển và tiện dụng để căn giữa lớp phủ, linh hoạt và linh động theo kích thước nội dung. Đôi khi, bạn chỉ cần đặt giao diện người dùng lên trên giao diện người dùng khác.

Ưu điểm
  • Hữu ích
  • Đáng tin cậy
  • Khi bạn cần, thông tin này vô giá
Nhược điểm
  • Mã có giá trị phần trăm âm
  • Yêu cầu position: relative để buộc một khối chứa
  • Dòng bị ngắt sớm và vụng về
  • Chỉ có thể có 1 đối tượng này cho mỗi khối chứa mà không cần thêm nỗ lực

Thích hợp cho các cửa sổ bật lên, thông báo ngắn và thông báo, ngăn xếp và hiệu ứng chiều sâu, cửa sổ bật lên.

Người chiến thắng

Nếu tôi ở trên một hòn đảo và chỉ có thể sử dụng 1 kỹ thuật căn giữa, thì đó sẽ là…

[tiếng trống]

Chuyển đổi linh hoạt 🎉

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

Bạn luôn có thể tìm thấy thuộc tính này trong các tệp kiểu của tôi vì thuộc tính này hữu ích cho cả bố cục vĩ mô và vi mô. Đây là một giải pháp đáng tin cậy toàn diện với kết quả phù hợp với mong đợi của tôi. Ngoài ra, vì tôi là một người nghiện định cỡ nội tại, nên tôi có xu hướng chuyển sang giải pháp này. Đúng là bạn phải nhập nhiều mã, nhưng lợi ích mà mã này mang lại sẽ lớn hơn số mã thừa.

MVP

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

Fluffy Center rất nhỏ nên dễ bị bỏ qua khi xem là một kỹ thuật căn giữa, nhưng đây là một phần không thể thiếu trong các chiến lược căn giữa của tôi. Nó rất nguyên tử đến nỗi đôi khi tôi quên mình đang sử dụng nó.

Kết luận

Những yếu tố nào làm hỏng chiến lược căn giữa của bạn? Bạn có thể thêm những thử thách nào khác vào chuông báo độ bền? Tôi đã cân nhắc việc dịch và chuyển đổi chiều cao tự động trên vùng chứa… còn gì nữa!?

Giờ thì bạn đã biết cách tôi làm, còn bạn thì sao?! Hãy đa dạng hoá các phương pháp của chúng ta và tìm hiểu tất cả các cách để xây dựng trên web. Hãy làm theo lớp học lập trình này cùng với bài đăng này để tạo ví dụ về việc căn giữa của riêng bạn, giống như các ví dụ trong bài đăng này. Hãy twitt cho tôi phiên bản của bạn để tôi thêm vào phần Bản phối lại của cộng đồng bên dưới.

Bản phối lại của cộng đồng