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

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

Adam Argyle

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

หากชอบวิดีโอ นี่คือโพสต์นี้เวอร์ชัน YouTube

ความท้าทาย

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

พลังแห่งการรับมือกับปัญหา

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

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

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

คำอธิบาย

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

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

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

เทคนิคหลัก 5 อย่างในการเข้าสู่ผู้ปลุกพลังสู่การรับมือกับปัญหานั้นมีเพียงแค่ 1 คนที่ได้รับมงกุฎแห่งการปรับตัว 👸

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

1. Squish: เยี่ยมเลย
2. สควอช: เยี่ยมเลย!
3. ซ้ำกัน: เยี่ยมเลย
4. แก้ไข: เยี่ยมเลย
5. ขั้นตอน: เยี่ยมเลย

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

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

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

2. อ่อนโยน

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

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

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

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

3. ออโต้บ็อต

1. Squish: เยี่ยม
2. สควอช: ดีมาก
3. ซ้ำ: ปกติ
4. แก้ไข: ดีมาก
5. ขั้นตอน: ดีมาก

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

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

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

4. ศูนย์ Fluffy

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

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

.fluffy-center {
  padding: 10ch;
}

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

5. ป๊อปและป็อป

1. บีบ: โอเค
2. สควอช: โอเค
3. ซ้ำกัน: ไม่ดี
4. แก้ไข: ใช้ได้
5. ขั้นตอน: ปกติ

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

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

ผู้ชนะ

ถ้าฉันอยู่บนเกาะและมีเทคนิคการจัดกึ่งกลางได้เพียง 1 อย่าง ก็คงจะ...

[กลองโรล]

ยืดหยุ่นแบบนุ่มนวล 🎉

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

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

ผู้เล่นยอดเยี่ยม

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

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

บทสรุป

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

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

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

• เคล็ดลับ CSS กับบล็อกโพสต์