วิธีจัดองค์ประกอบให้อยู่ตรงกลางด้วย CSS

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

จัดองค์ประกอบข้อความในแนวนอน

การจัดกึ่งกลางข้อความในแนวนอนจะตรงไปตรงมา เราใช้ text-align ให้มีค่า center .

h1 {
  text-align: center;
}

ข้อมูลข้างต้นใช้ได้กับ ข้อความ . ใดๆ ธาตุ

องค์ประกอบบล็อกตรงกลาง (ไม่ใช่ข้อความ) ในแนวนอน

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

.center-horizontal {
  margin-left: auto;
  margin-right: auto;
  width: 100px; /* or max-content;*/
}

หมายเหตุ:หากคุณไม่ต้องการระบุค่าความกว้างคงที่เฉพาะให้กับองค์ประกอบที่อยู่ตรงกลาง คุณสามารถใช้ width: max-content — จากนั้นองค์ประกอบของคุณจะขยายไปถึงความกว้างของเนื้อหา

บล็อกเทียบกับองค์ประกอบบล็อกแบบอินไลน์

.center-horizontal คลาสด้านบนจะจัดองค์ประกอบบล็อกให้อยู่ตรงกลาง แต่ไม่ใช่ อินไลน์ องค์ประกอบ ใน HTML องค์ประกอบบางอย่างเป็นองค์ประกอบแบบอินไลน์โดยค่าเริ่มต้น <button> องค์ประกอบเช่นมี display: inline-block . เริ่มต้น สไตล์. แต่คุณสามารถสร้างองค์ประกอบบล็อกได้ง่ายๆ เพียงเพิ่ม display: block ไปยังคลาส CSS ของคุณ:

.center-horizontal {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100px; /* or max-content;*/
}

ตอนนี้มันจะใช้ได้กับทุกองค์ประกอบ

จัดกึ่งกลางในแนวนอนด้วย Flexbox

ด้วยคุณสมบัติ flexbox ที่ทันสมัยซึ่งจัดกึ่งกลางในแนวนอนจึงเป็นเรื่องง่าย แทนที่ .center-horizontal ปัจจุบันของคุณ คลาสนี้:

.center-horizontal {
  display: flex;
  justify-content: center;
}

อย่างที่คุณเห็น <div> . ของคุณ องค์ประกอบอยู่ตรงกลาง

แต่ด้วยเหตุผลบางอย่าง องค์ประกอบปุ่มของคุณไม่ทำ ให้อะไร

ก็ <button> องค์ประกอบเป็นองค์ประกอบพิเศษที่แตกต่างจาก <div> องค์ประกอบไม่สามารถเป็นสิ่งที่เรียกว่า flex-container

แต่ปุ่มสามารถเป็น flex-item . ได้ ซึ่งหมายความว่าหากคุณวางปุ่มของคุณไว้ในคอนเทนเนอร์แบบยืดหยุ่น การจัดกึ่งกลางก็จะทำงาน ลองเพิ่ม HTML ต่อไปนี้ในโปรแกรมแก้ไขของคุณ:

<div class="center-horizontal">
  <button>Center me</button>
</div>

ตอนนี้ใช้งานได้แล้ว! ฉันเพิ่งลบคลาสกลางออกจากองค์ประกอบปุ่มและใช้มันในพาเรนต์ตัด <div> ภาชนะ

เคล็ดลับ:<img> องค์ประกอบไม่สามารถเป็นคอนเทนเนอร์แบบยืดหยุ่นได้ แต่สามารถเป็นรายการแบบยืดหยุ่นได้เช่นเดียวกับปุ่ม

-

จัดองค์ประกอบในแนวตั้ง

ผู้เริ่มต้น CSS มักจะมีปัญหาในการจัดองค์ประกอบในแนวตั้ง Flexbox ทำให้สิ่งนี้เป็นเรื่องง่าย แต่สำหรับการวัดที่ดี อันดับแรก มาดูว่ามันทำงานอย่างไรกับวิธีการ CSS รุ่นเก่า

คุณอาจคิดว่าคุณสามารถใช้บางอย่างเช่น margin-top และ margin-bottom auto — แต่ไม่นะ

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

<section class="section">
  <div class="center-vertical">Center me vertically</div>
</section>

เพิ่ม CSS นี้สำหรับคลาสส่วนของคุณ (พาเรนต์):

.section {
  height: 200px;
  border: 1px solid black;
}

เส้นขอบเป็นเพียงเพื่อให้มองเห็นได้ง่ายขึ้นว่าเกิดอะไรขึ้น

เพิ่ม CSS นี้สำหรับองค์ประกอบลูกของคุณ:

.center-vertical {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

เสร็จแล้ว!

จัดกึ่งกลางแนวตั้งด้วย flexbox

หากต้องการจัดองค์ประกอบในแนวตั้งด้วย flexbox เราจำเป็นต้องมีคอนเทนเนอร์ flex parent คุณสามารถลบ center-vertical คลาสจากองค์ประกอบลูกของคุณจากตัวอย่างก่อนหน้า เพิ่มคุณสมบัติ flexbox ทั้งสองนี้ใน .section . ของคุณ คลาสเช่นนี้:

.section {
  height: 200px;
  border: 1px solid black;
  display: flex;
  align-items: center;
}

และตอนนี้องค์ประกอบย่อยของคุณมีศูนย์กลางในแนวตั้งด้วย flexbox

องค์ประกอบกึ่งกลางทั้งในแนวตั้งและแนวนอน

หากต้องการจัดองค์ประกอบทั้งแนวตั้งและแนวนอน เราจำเป็นต้องเพิ่มคุณสมบัติเพียงไม่กี่อย่างเท่านั้น มาเริ่มกันด้วยวิธี CSS แบบเก่ากัน

ขั้นแรกให้เพิ่มมาร์กอัปนี้:

<section class="section">
  <div class="center-vertical-and-horizontal">
    Center me vertically & horizontally
  </div>
</section>

และ CSS

.section {
  height: 200px;
  border: 1px solid black;
}

.center-vertical-and-horizontal {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
}

อย่างที่คุณเห็น มันคล้ายกับตัวอย่าง "องค์ประกอบตรงกลางแนวตั้ง" (ไม่มี flexbox) เมื่อก่อนมาก เราเพิ่งเพิ่ม left: 50% ประกาศ และสำหรับการ transform คุณสมบัติ เราระบุทั้งแกน X และ Y ในการประกาศครั้งเดียว:(-50%, -50%) . ค่าแรกคือ X ค่าที่สองคือ Y

จัดกึ่งกลางแนวตั้งและแนวนอนด้วย flexbox

สุดท้าย ลองทำแบบเดียวกันโดยใช้ flexbox คุณสามารถลบ center-vertical-and-horizontal คลาสจากองค์ประกอบลูกของคุณ ตอนนี้สำหรับ .section . ของคุณ คลาสใช้ CSS ต่อไปนี้:

.section {
  height: 200px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}

ความแตกต่างเพียงอย่างเดียวระหว่างสิ่งนี้กับตัวอย่างแนวตั้งตรงกลางจากก่อนหน้านี้คือ justify-content: center ประกาศ ซึ่งจัดการงานจัดกึ่งกลางแนวนอน

จัดกึ่งกลางในแนวนอน &แนวตั้งด้วย CSS Grid

สำหรับการวัดผลที่ดี เรามาดูกันว่าคุณสมบัติกริด CSS ที่ทันสมัยและทันสมัยจัดการกับการจัดกึ่งกลางแนวตั้งและแนวนอนได้อย่างไร แทนที่ .section . ของคุณ คลาสนี้:

.section {
  height: 200px;
  border: 1px solid black;
  display: grid;
  place-items: center;
}

เพียงสองคุณสมบัติ (display: grid &place-items:center ) ทำงานกับกริด CSS สะดวกมาก!

น่าเสียดายที่ CSS grid นั้นเข้ากันไม่ได้ในเบราว์เซอร์รุ่นใหม่ทั้งหมด และมันยังใช้งานไม่ได้ 100% ใน CMS/framework ยอดนิยมหลายๆ ตัว เช่น WordPress

ดูสถานะความเข้ากันได้ในปัจจุบันของกริด CSS ที่นี่