Căn giữa trong CSS

Hãy thực hiện theo 5 kỹ thuật căn giữa khi họ trải qua một loạt bài kiểm tra để xem kỹ thuật nào dễ thay đổi nhất.

Adam Argyle

Lấy tâm điểm trong CSS là một thử thách khét tiếng, chứa đầy những câu đùa hài hước và chế giễu. 2020 CSS đã trưởng thành và giờ đây chúng tôi có thể cười đùa một cách chân thật, không phải qua nghiến răng.

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

Thách thức

Có nhiều loại căn giữa. Số lượng tính năng tuỳ theo trường hợp sử dụng đặt vào trung tâm, v.v. Để giải thích lý do đằng sau "sự chiến thắng" kỹ thuật định tâm, tôi đã tạo ra The Resilience Ringer. Đây là một loạt bài kiểm tra căng thẳng cho mỗi trọng tâm để cân bằng giữa nội dung và bạn quan sát hiệu suất của chúng. Ở 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 rằng bạn có thể áp dụng các kỹ thuật và giải pháp căn giữa mới.

Người giữ bài hát về khả năng phục hồi

Giọng điệu kiên trì thể hiện niềm tin của tôi rằng lấy trung tâm chiến lược phải có khả năng thích ứng với bố cục quốc tế, khung nhìn có kích thước thay đổi, chỉnh sửa văn bản và nội dung. Các nguyên lý này đã giúp định hình các bài kiểm tra khả năng phục hồi sau đây cho kỹ thuật tập trung để chịu đựng:

  1. Làm yếm: căn giữa sẽ có thể xử lý các thay đổi về chiều rộng
  2. Bóp méo: căn giữa sẽ có thể xử lý các thay đổi về chiều cao
  3. Sao chép: căn giữa phải linh động đối với số lượng mục.
  4. Chỉnh sửa: căn giữa phải linh động theo độ dài và ngôn ngữ của nội dung
  5. Quy trình: căn giữa phải là hướng tài liệu và chế độ viết không phụ thuộc vào

Giải pháp thành công phải thể hiện khả năng phục hồi bằng cách giữ nội dung ở chính giữa trong khi được làm nhỏ, thu nhỏ, sao chép, chỉnh sửa và hoán đổi thành nhiều chế độ ngôn ngữ và chỉ đường. Trung tâm đáng tin cậy và kiên cường, một trung tâm an toàn.

Chú giải

Tôi đã cung cấp một số gợi ý màu trực quan để giúp bạn giữ lại một số thông tin meta theo ngữ cảnh:

  • Đường viền màu hồng biểu thị quyền sở hữu các kiểu căn giữa
  • Hộp màu xám là nền trên vùng chứa tìm cách căn giữa mục
  • Mỗi trẻ đều có màu nền trắng nên bạn có thể xem 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ào Resilience Ringer, sẽ chỉ có một kỹ thuật nhận được Vương miện kiên cường 👸.

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 quá!
  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à Viết tắt place-content. Vì nguyên tắc này tập trung và biện minh cho tất cả trẻ em nói chung, đó là kỹ thuật căn giữa vững chắc cho các nhóm thành phần 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
  • Việc chỉnh sửa và bảo trì ở cùng một nơi
  • Khoảng cách đảm bảo khoảng cách bằng nhau giữa n phần tử con
  • Lưới tạo 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ả các chiều rộng còn lại. Đây sẽ là được thảo luận thêm trong Gentle Flex.

Phù hợp cho những bố cục macro chứa đoạn văn bản và dòng tiêu đề, nguyên mẫu hoặc thường là những nội dung cần căn giữa dễ đọc.

2. Gập nhẹ

  1. Squish: tuyệt vời!
  2. Squash: 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!

Gentle Flex là chiến lược chỉ tập trung vào hiệu quả hơn. Giọng nói của bạn thật nhẹ nhàng, bởi 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 bị thay đổi trong 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;
}
Ưu điểm
  • Chỉ xử lý cách căn chỉnh, hướng và phân phối
  • Việc chỉnh sửa và bảo trì ở cùng một nơi
  • Khoảng cách đả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 macro và vi mô.

3. Bot tự động

  1. Squish: tuyệt vời
  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. Flow: tuyệt vời

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 với lề tự động. Có điều gì đó hoài niệm và tuyệt vời margin: auto thao tác trên tất cả các mặt của phần tử.

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}
Ưu điểm
  • Thủ thuật thú vị
  • Nhanh và dơ
Nhược điểm
  • Kết quả khó xử lý khi tràn
  • Phụ thuộc vào khả năng phân phối thay vì khoảng cách, nghĩa là bố cục có thể được dùng với phần tử con chạm vào hai bên
  • Bị "đẩ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 nhà xuất bản con

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

4. Trung tâm Fluffy

  1. Squish: tệ
  2. Bóng quần: tệ
  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 thuộc tính logic)

Thí sinh "trung tâm lông tơ" cho đến nay, đối thủ có âm thanh thú vị nhất của chúng tôi và là kỹ thuật căn giữa hoàn toàn thuộc sở hữu của phần tử/con. Xem solo màu hồng bên trong của chúng tôi biên giới!?

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

Rất phù hợp cho từ hoặc cụm từ tập trung vào từ hoặc cụm từ, thẻ, thuốc, nút, khối và khác.

5. Nhạc Pop và Plop

  1. Squish: ok
  2. Bóng quần: ok
  3. Trùng lặp: tệ
  4. Chỉnh sửa: tốt
  5. Quy trình: phù hợp

Tiếng " bốp" này vì vị trí tuyệt đối làm bật phần tử ra ngoài bình thường luồng. "Giao diện" một phần của tên xuất phát từ thời điểm tôi thấy hữu ích nhất: đặt nó lên trên nội dung khác. Đây là một lớp phủ cổ điển và tiện dụng linh hoạt và linh hoạt với kích thước nội dung. Đôi khi, bạn chỉ cần để chèn 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, đó là 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ấu ngắt dòng sớm và không phù hợp
  • Chỉ có thể có 1 cho mỗi khối chứa mà không mất thêm công sức

Phù hợp với cửa sổ phụ, thông báo ngắn và tin nhắn, 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à...

[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 tệp này trong biểu định kiểu của tôi vì nó hữu ích cho cả macro và các bố cục vi mô. Đó là giải pháp toàn diện đáng tin cậy với kết quả phù hợp với kỳ vọng của họ. Ngoài ra, vì tôi vốn là một người thường xuyên sử dụng tính năng định cỡ, nên tôi có xu hướng vào giải pháp này. Đúng, nói ra thì hơi nhiều nhưng lợi ích mà việc này mang lại lớn hơn mã bổ sung.

MVP

Trung tâm Fluffy

.fluffy-center {
  padding: 2ch;
}

Fluffy Center rất nhỏ đến mức rất dễ bị coi là kỹ thuật căn giữa, nhưng đó lại là một yếu tố chính trong chiến lược tập trung của tôi. Hệ thống này rất nguyên tử nên đôi khi tôi quên tôi đang sử dụng nó.

Kết luận

Điều gì làm hỏng chiến lược tập trung của bạn? Những thách thức khác có thể được thêm vào chuông báo về khả năng phục hồi không? Tôi đã cân nhắc đến việc dịch thuật và chuyển đổi chiều cao tự động trên vùng chứa... còn gì khác nữa!?

Giờ bạn đã biết cách tôi thực hiện điều đó, bạn sẽ làm thế nào?! Hãy cùng đa dạng hoá phương pháp tiếp cận và tìm hiểu tất cả các cách xây dựng trên web. Hãy theo dõi lớp học lập trình qua bài đăng này để tạo ví dụ căn giữa của riêng bạn, giống như các ví dụ trong bài đăng này. Bài đăng trên Twitter cho tôi phiên bản của bạn và tôi sẽ thêm nó 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