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.

Adam Argyle

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 nhe 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ư kỹ thuật "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 phải 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

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;
}

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 được 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;
}

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;
}

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;
}

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.

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 thử thách nào khác vào chuông báo về khả năng phục hồi? 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

• Mẹo CSS thông qua bài đăng trên blog