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

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

Adam Argyle

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

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

ความท้าทาย

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

เสียงปลุกความยืดหยุ่น

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

1. ถูกบล็อก: การจัดกึ่งกลางควรจะรองรับการเปลี่ยนแปลงด้านความกว้างได้
2. ถูกบล็อก: การจัดกึ่งกลางควรจะรองรับการเปลี่ยนแปลงความสูงได้
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. ตุ๊กตา: เยี่ยมเลย
2. สควอช: ดีมาก
3. ซ้ำกัน: ไม่เป็นไร
4. แก้ไข: ดีมาก
5. โฟลว์: ดีมาก

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

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

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

4. Fluffy Center

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

ผู้แข่งขัน "ศูนย์ขนปุย" เป็นคู่แข่งที่ฟังดูอร่อยที่สุดของเรา และเป็น เทคนิคการจัดกึ่งกลางที่มีองค์ประกอบทั้งหมด/องค์ประกอบย่อย ดูเฉิดฉายสีชมพูภายใน เส้นขอบ!?

.fluffy-center {
  padding: 10ch;
}

เหมาะสำหรับการใช้คำหรือวลีเป็นศูนย์กลาง แท็ก ยา ปุ่ม ชิป และ และอีกมากมาย

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

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

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

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

ผู้ชนะ

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

[รัวกลอง]

Gentle Flex 🎉

.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 ด้วยบล็อกโพสต์