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

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

Adam Argyle

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

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

ความท้าทาย

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

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

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

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

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

คำอธิบาย

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

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

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

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

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

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

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

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

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

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;
}
ข้อดี
  • แฮนเดิลเฉพาะการจัดแนว ทิศทาง และการกระจาย
  • แก้ไขและบำรุงรักษาได้ในที่เดียว
  • การเว้นช่องว่างรับประกันระยะห่างที่เท่ากันในกลุ่มเด็ก n คน
ข้อเสีย
  • บรรทัดโค้ดส่วนใหญ่

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

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 อื่นๆ

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

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

ผู้ชนะ

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

รีมิกซ์ในชุมชน