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

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

Adam Argyle

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

หากต้องการดูวิดีโอ โปรดดูโพสต์นี้ใน YouTube

ความท้าทาย

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

The Resilience Ringer

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

1. บีบ: การจัดกึ่งกลางควรจัดการการเปลี่ยนแปลงความกว้างได้
2. แก้ไขแล้ว: การจัดกึ่งกลางควรจัดการการเปลี่ยนแปลงความสูงได้
3. ซ้ำกัน: การจัดกึ่งกลางควรเป็นแบบไดนามิกตามจำนวนรายการ
4. แก้ไข: การจัดกึ่งกลางควรปรับเปลี่ยนตามความยาวและภาษาของเนื้อหา
5. Flow: การจัดกึ่งกลางควรไม่ขึ้นอยู่กับทิศทางของเอกสารและโหมดการเขียน

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

คำอธิบาย

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

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

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

เทคนิคการทำสมาธิ 5 อย่างจะเข้าสู่การแข่งขัน Resilience Ringer แต่จะมีเพียงเทคนิคเดียวเท่านั้นที่จะได้รับ Resilience Crown 👸

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

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

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

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}

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

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

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

3. Autobot

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

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

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}

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

4. Fluffy Center

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

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

.fluffy-center {
  padding: 10ch;
}

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

5. ป๊อปแอนด์พลอป

1. บีบ: โอเค
2. สควอช: โอเค
3. ซ้ำ: ไม่ดี
4. แก้ไข: ดี
5. Flow: ดี

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

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

ผู้ชนะ

หากฉันอยู่บนเกาะและมีเทคนิคการทำสมาธิได้เพียง 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 เป็นเทคนิคการจัดกึ่งกลางที่เล็กมากจนอาจมองข้ามไปได้ แต่ก็เป็นเทคนิคหลักในกลยุทธ์การจัดกึ่งกลางของฉัน ซึ่งเป็นหน่วยที่เล็กมากจนบางครั้งฉัน ลืมไปเลยว่ากำลังใช้มันอยู่

บทสรุป

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

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

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

• CSS Tricks พร้อมบล็อกโพสต์