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 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 đó. Ở phần cuối, tôi tiết lộ kỹ thuật ghi đ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 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. Flow: Chế độ căn giữa phải độc lập với 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, trong đó các mục được căn giữa
• Mỗi phần tử con có màu nền trắng để bạn có thể thấy mọi hiệu ứng của kỹ thuật căn giữa đối với kích thước hộp con (nếu có)

5 thí sinh

5 kỹ thuật căn giữa đều đi vào Resilience Ringer, sẽ chỉ có một kỹ thuật nhận được Vương miện phục hồi 👸.

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!

Thật khó để vượt qua tính súc tích của display: grid và cách 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. Squash: 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à cách nhau 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. Bot tự động

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

Vùng chứa được đặt để linh hoạt mà không có kiểu căn chỉnh, trong khi phần tử 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: 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: tốt

Điều này "nảy" 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à kỹ thuật căn giữa lớp phủ cổ điển và tiện dụng, linh hoạt và linh hoạt đối với 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ể có 1 kỹ thuật căn giữa, thì đó sẽ là...

[tiếng trống]

Gentle Flex 🎉

.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, có rất nhiều thông tin để nhập ra từ này, nhưng lợi ích mà tính năng này mang lại lại lớn hơn mã bổ sung.

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á phương thức tiếp cận của chúng tôi 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 một bài đăng trên blog