การจัดกึ่งกลางใน CSS

ติดตามเทคนิคการจัดกึ่งกลาง 5 เทคนิคขณะที่ผ่านการทดสอบต่างๆ เพื่อดูว่าเทคนิคใดมีความยืดหยุ่นต่อการเปลี่ยนแปลงมากที่สุด

Adam Argyle

การจัดกึ่งกลางใน CSS เป็นความท้าทายที่ขึ้นชื่อ เต็มไปด้วยเรื่องตลกและการล้อเลียน 2020 CSS เติบโตขึ้นอย่างเต็มที่ และตอนนี้เราสามารถหัวเราะกับมุกตลกเหล่านั้นได้อย่างจริงใจ ไม่ใช่หัวเราะแบบฝืนๆ

หากคุณชอบดูวิดีโอมากกว่า เรามีโพสต์นี้ในเวอร์ชัน YouTube ด้วย

ความท้าทาย

การจัดให้อยู่กึ่งกลางมีหลายประเภท ตั้งแต่กรณีการใช้งานที่แตกต่างกัน จำนวนสิ่งที่จะจัดให้อยู่กึ่งกลาง และอื่นๆ เพื่อแสดงให้เห็นเหตุผลเบื้องหลังเทคนิคการจัดให้อยู่กึ่งกลางที่ "ชนะ" ฉันจึงสร้าง The Resilience Ringer ขึ้นมา ซึ่งเป็นการทดสอบความเครียดหลายครั้งสำหรับกลยุทธ์การจัดศูนย์กลางแต่ละกลยุทธ์เพื่อสร้างสมดุลภายในและให้คุณสังเกตประสิทธิภาพของกลยุทธ์เหล่านั้น ในตอนท้าย ฉันจะเปิดเผยเทคนิคที่ได้คะแนนสูงสุด รวมถึงเทคนิคที่ "มีคุณค่ามากที่สุด" เราหวังว่าคุณจะได้รับเทคนิคและโซลูชันใหม่ๆ ในการสร้างสมดุลให้ตนเอง

ผู้เชี่ยวชาญด้านความยืดหยุ่น

Resilience Ringer เป็นตัวแทนของความเชื่อของฉันที่ว่ากลยุทธ์การจัดกึ่งกลางควรมีความยืดหยุ่นต่อเลย์เอาต์สากล วิวพอร์ตขนาดต่างๆ การแก้ไขข้อความ และเนื้อหาแบบไดนามิก หลักการเหล่านี้ช่วยกำหนดรูปแบบการทดสอบความยืดหยุ่นต่อไปนี้เพื่อให้เทคนิคการจัดศูนย์กลางคงอยู่ได้

  1. บีบอัด: การจัดให้อยู่กึ่งกลางควรจัดการการเปลี่ยนแปลงความกว้างได้
  2. Squashed: centering should be able to handle changes to height
  3. Duplicate: centering should be dynamic to number of items
  4. แก้ไข: การจัดกึ่งกลางควรปรับเปลี่ยนตามความยาวและภาษาของเนื้อหา
  5. Flow: การจัดให้อยู่กึ่งกลางควรไม่ขึ้นอยู่กับทิศทางของเอกสารและโหมดการเขียน

โซลูชันที่ชนะควรแสดงให้เห็นถึงความยืดหยุ่นโดยการเก็บเนื้อหาไว้ตรงกลางขณะที่ถูกบีบอัด บด ทำซ้ำ แก้ไข และสลับเป็นโหมดและทิศทางภาษาต่างๆ ศูนย์ที่เชื่อถือได้และยืดหยุ่น ศูนย์ที่ปลอดภัย

Legend

เราได้ใส่คำแนะนำสีที่มองเห็นได้เพื่อช่วยให้คุณเก็บข้อมูลเมตาบางอย่างไว้ในบริบท

  • เส้นขอบสีชมพูแสดงถึงการเป็นเจ้าของสไตล์การจัดกึ่งกลาง
  • กล่องสีเทาคือพื้นหลังของคอนเทนเนอร์ที่ต้องการจัดรายการให้อยู่กึ่งกลาง
  • องค์ประกอบย่อยแต่ละรายการมีสีพื้นหลังเป็นสีขาวเพื่อให้คุณเห็นผลกระทบที่เทคนิคการจัดกึ่งกลางมีต่อขนาดกล่องย่อย (หากมี)

ผู้เข้าแข่งขัน 5 คน

เทคนิคการทำสมาธิ 5 เทคนิคจะเข้าสู่สังเวียนความยืดหยุ่น แต่จะมีเพียงเทคนิคเดียวเท่านั้นที่จะได้รับมงกุฎแห่งความยืดหยุ่น 👸

1. ศูนย์เนื้อหา

การแก้ไขและทำซ้ำเนื้อหาด้วย VisBug
  1. Squish: เยี่ยมเลย
  2. สควอช: เยี่ยมเลย
  3. Duplicate: ยอดเยี่ยม
  4. แก้ไข: เยี่ยมเลย
  5. ความลื่นไหล: ดีมาก

คงยากที่จะเอาชนะความกระชับของ display: grid และชวเลข place-content ได้ เนื่องจากจะจัดองค์ประกอบย่อยให้อยู่กึ่งกลางและจัดชิดขอบร่วมกัน จึงเป็นเทคนิคการจัดกึ่งกลางที่มีประสิทธิภาพสำหรับกลุ่มองค์ประกอบที่ต้องการให้อ่าน

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}
ข้อดี
  • เนื้อหาจะอยู่ตรงกลางแม้ในพื้นที่จำกัดและมีเนื้อหาล้น
  • การแก้ไขและการบำรุงรักษาทั้งหมดจะรวมอยู่ในที่เดียว
  • ช่องว่างจะรับประกันระยะห่างที่เท่ากันระหว่างองค์ประกอบย่อย n รายการ
  • ตารางกริดจะสร้างแถวโดยค่าเริ่มต้น
ข้อเสีย
  • องค์ประกอบย่อยที่กว้างที่สุด (max-content) จะกำหนดความกว้างสำหรับองค์ประกอบที่เหลือทั้งหมด เราจะพูดถึงเรื่องนี้เพิ่มเติมในส่วน Gentle Flex

เหมาะสำหรับเลย์เอาต์มาโครที่มีทั้งย่อหน้าและบรรทัดแรก ต้นแบบ หรือโดยทั่วไปแล้วคือสิ่งที่ต้องจัดให้อยู่กึ่งกลางอย่างชัดเจน

2. Gentle Flex

  1. Squish: เยี่ยมเลย
  2. สควอช: เยี่ยมเลย
  3. ทำซ้ำ: เยี่ยมมาก
  4. แก้ไข: เยี่ยมเลย
  5. Flow: เยี่ยมมาก

Gentle Flex เป็นกลยุทธ์ที่เน้นการจัดตำแหน่งเท่านั้นอย่างแท้จริง ซึ่งจะนุ่มนวลและอ่อนโยน เพราะไม่เหมือนกับ place-content: center ตรงที่ไม่มีการเปลี่ยนขนาดกล่องของเด็กในระหว่างการจัดให้อยู่กึ่งกลาง ระบบจะจัดเรียงรายการทั้งหมดให้อยู่ตรงกลางและเว้นระยะห่างอย่างเป็นระเบียบที่สุดเท่าที่จะทำได้

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}
ข้อดี
  • จัดการเฉพาะการจัดแนว ทิศทาง และการกระจาย
  • การแก้ไขและการบำรุงรักษาทั้งหมดรวมอยู่ในที่เดียว
  • ช่องว่างจะรับประกันระยะห่างที่เท่ากันระหว่างองค์ประกอบย่อย n รายการ
ข้อเสีย
  • บรรทัดโค้ดมากที่สุด

เหมาะสำหรับทั้งเลย์เอาต์แบบมาโครและไมโคร

3. Autobot

  1. Squish: ยอดเยี่ยม
  2. สควอช: ดีมาก
  3. ซ้ำ: ไม่เป็นไร
  4. แก้ไข: ดีมาก
  5. ความลื่นไหล: ดีมาก

คอนเทนเนอร์ได้รับการตั้งค่าเป็น Flex โดยไม่มีสไตล์การจัดแนว ส่วนองค์ประกอบย่อยโดยตรงจะได้รับการจัดสไตล์ด้วยระยะขอบอัตโนมัติ การทำงานกับทุกด้านขององค์ประกอบmargin: autoให้ความรู้สึกที่ยอดเยี่ยมและชวนให้คิดถึงอดีต

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}
ข้อดี
  • เคล็ดลับสนุกๆ
  • แบบเร็วๆ และไม่เป็นทางการ
ข้อเสีย
  • ผลลัพธ์ที่ดูแปลกตาเมื่อมีข้อความล้น
  • การใช้การกระจายแทนช่องว่างหมายความว่าเลย์เอาต์อาจเกิดขึ้นโดยที่องค์ประกอบย่อยแตะด้านข้างกัน
  • การ "ดัน" เข้าไปในตำแหน่งดูเหมือนจะไม่เหมาะสมและอาจส่งผลให้ขนาดกล่องขององค์ประกอบย่อยเปลี่ยนแปลงไป

เหมาะสำหรับการจัดไอคอนหรือองค์ประกอบเทียมให้อยู่ตรงกลาง

4. Fluffy Center

  1. บีบอัด: ไม่ดี
  2. สควอช: ไม่ดี
  3. ซ้ำ: ไม่ดี
  4. แก้ไข: เยี่ยมเลย
  5. Flow: เยี่ยมมาก (ตราบใดที่คุณใช้พร็อพเพอร์ตี้เชิงตรรกะ)

ผู้เข้าแข่งขัน "fluffy center" เป็นผู้เข้าแข่งขันที่ฟังดูน่าอร่อยที่สุด และเป็นเทคนิคการจัดให้อยู่กึ่งกลางเพียงเทคนิคเดียวที่องค์ประกอบ/องค์ประกอบย่อยเป็นเจ้าของทั้งหมด เห็นขอบสีชมพูด้านใน ของ Solo ไหม

.fluffy-center {
  padding: 10ch;
}
ข้อดี
  • ปกป้องเนื้อหา
  • ปรมาณู
  • การทดสอบทุกครั้งจะมีกลยุทธ์การจัดกึ่งกลางนี้อยู่โดยไม่เปิดเผย
  • Word space is gap
ข้อเสีย
  • ภาพลวงตาว่าไม่มีประโยชน์
  • จะมีการขัดแย้งกันระหว่างคอนเทนเนอร์กับรายการต่างๆ เนื่องจากแต่ละรายการมีขนาดที่แน่นอน

เหมาะสำหรับการจัดกึ่งกลางที่เน้นคำหรือวลี แท็ก ป้ายยา ปุ่ม ชิป และอื่นๆ

5. Pop & Plop

  1. Squish: โอเค
  2. สควอช: พอใช้
  3. ซ้ำ: ไม่ดี
  4. แก้ไข: ดี
  5. การไหล: ดี

ซึ่งจะ "เด้ง" เนื่องจากตำแหน่งแบบสัมบูรณ์จะทำให้องค์ประกอบเด้งออกจากขั้นตอนปกติ ส่วน "plop" ของชื่อมาจากตอนที่ฉันพบว่ามีประโยชน์มากที่สุด นั่นคือการวางไว้บนสิ่งอื่นๆ ซึ่งเป็นเทคนิคการจัดกึ่งกลางโอเวอร์เลย์แบบคลาสสิกและสะดวก ซึ่งมีความยืดหยุ่นและปรับเปลี่ยนตามขนาดเนื้อหาได้ บางครั้งคุณก็แค่ต้องวาง UI ไว้ด้านบนของ UI อื่น

ข้อดี
  • มีประโยชน์
  • เชื่อถือได้
  • เมื่อคุณต้องการใช้ มันจะมีค่ามาก
ข้อเสีย
  • โค้ดที่มีค่าเปอร์เซ็นต์เป็นลบ
  • ต้องใช้ position: relative เพื่อบังคับบล็อกที่มีอยู่
  • การขึ้นบรรทัดใหม่เร็วเกินไปและไม่เหมาะสม
  • โดยสามารถมีได้เพียง 1 รายการต่อบล็อกที่มีอยู่โดยไม่ต้องดำเนินการเพิ่มเติม

เหมาะสำหรับโมดัล, ข้อความแจ้งเตือนและข้อความ, สแต็กและเอฟเฟกต์ความลึก, ป๊อปโอเวอร์

ผู้ชนะ

ถ้าฉันติดเกาะและใช้เทคนิคการทำสมาธิได้เพียงอย่างเดียว ฉันจะเลือก…

[เสียงกลองรัว]

Gentle Flex 🎉

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

คุณจะเห็นฟีเจอร์นี้ในสไตล์ชีตของฉันเสมอ เพราะมีประโยชน์สำหรับทั้งเลย์เอาต์มาโครและไมโคร เป็นโซลูชันที่เชื่อถือได้รอบด้านและให้ผลลัพธ์ที่ตรงกับความคาดหวังของฉัน นอกจากนี้ เนื่องจากฉันเป็นแฟนตัวยงของการปรับขนาดตามเนื้อหา ฉันจึงมักจะใช้โซลูชันนี้ จริงอยู่ที่ต้องพิมพ์เยอะ แต่ประโยชน์ที่ได้ก็คุ้มค่ากับโค้ดที่เพิ่มขึ้น

MVP

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

Fluffy Center เป็นเทคนิคการจัดกึ่งกลางที่เล็กมากจนมองข้ามได้ง่าย แต่เป็นกลยุทธ์การจัดกึ่งกลางที่สำคัญของฉัน มันเป็นอะตอมมากจนบางครั้งฉันก็ลืมไปว่ากำลังใช้มันอยู่

บทสรุป

สิ่งใดบ้างที่ทำให้กลยุทธ์การจัดกึ่งกลางของคุณใช้ไม่ได้ เราจะเพิ่มความท้าทายอะไรอีก ลงในเกม Resilience Ringer ได้บ้าง ฉันพิจารณาการแปลและสวิตช์ความสูงอัตโนมัติในคอนเทนเนอร์… มีอะไรอีกไหม

ตอนนี้คุณก็รู้แล้วว่าเราทำยังไง แล้วคุณล่ะจะทำยังไง มาลองใช้วิธีการที่หลากหลาย และเรียนรู้วิธีทั้งหมดในการสร้างบนเว็บกัน ทำตาม Codelab ในโพสต์นี้เพื่อสร้างตัวอย่างการจัดกึ่งกลางของคุณเอง เช่นเดียวกับตัวอย่างในโพสต์นี้ ทวีตเวอร์ชันของคุณมาให้ฉัน แล้วฉันจะเพิ่มลงในส่วนรีมิกซ์ของชุมชนด้านล่าง

รีมิกซ์ของชุมชน