วิธีจัดกึ่งกลาง Div ใน CSS (Flexbox)
สร้างเค้าโครง CSS flexbox ที่มองเห็นได้: flex-direction, justify-content, align-items, flex-wrap และ gap บนคอนเทนเนอร์ รวมถึง flex-grow ต่อลูก, flex-shrink และ flex-basis ทั้งหมดนี้พร้อมการแสดงตัวอย่างแบบสดและ CSS ที่คัดลอกได้
ผลลัพธ์
นี่คือคำตอบโดยตรงสำหรับคำถามที่ถูกถามมากที่สุดใน CSS: หากต้องการจัด div ให้อยู่ตรงกลาง ให้ใส่ display: flex, justify-content: center และ align-items: center บนพาเรนต์ แค่นั้นแหละ - ประกาศสามรายการบนคอนเทนเนอร์ และเด็กนั่งตรงกลางอย่างสมบูรณ์ทั้งแนวนอนและแนวตั้งด้านใน ไม่ว่าขนาดใดก็ตาม หน้านี้จะเปิดตัวสร้างโดยใช้ชุดค่าผสมนั้นที่ใช้อยู่แล้ว ดังนั้นตัวอย่างด้านล่างจึงแสดงให้เห็นว่าขณะนี้กำลังทำงานกับกล่องที่มีหมายเลขสามกล่อง
ก่อน flexbox การวางศูนย์กลาง div จำเป็นต้องมีแฮ็ก: Margin: 0 auto จัดกึ่งกลางแนวนอนเท่านั้นและทำงานบนบล็อกที่มีความกว้างคงที่เท่านั้น การจัดกึ่งกลางในแนวตั้งหมายถึงตำแหน่ง: สัมบูรณ์ที่มีระยะขอบติดลบหรือเคล็ดลับการแปลง ทั้งคู่เปราะบางเมื่อเนื้อหาเปลี่ยนขนาด justify-content จัดการแกนหลักและ align-items จัดการ cross axis โดยทั้งสองทิศทางจะรวมกันอยู่กึ่งกลางทั้งสองทิศทาง ไม่ว่าเด็กจะสูงหรือกว้างแค่ไหน ซึ่งเป็นเหตุผลว่าทำไมคู่นี้จึงกลายเป็นคำตอบมาตรฐาน
ลากตัวควบคุมด้านล่างแล้วดูกล่องแสดงตัวอย่างทั้งสามกล่องอยู่ตรงกลางเมื่อคอนเทนเนอร์เปลี่ยนรูปร่าง หรือเพิ่มช่องว่างระหว่างกล่องเหล่านั้น เมื่อถูกต้องแล้ว ให้คัดลอกบล็อก CSS ที่ด้านล่างตรงไปยังสไตล์ชีตของคุณ — มันจะทำงานในลักษณะเดียวกันในเบราว์เซอร์สมัยใหม่ทุกตัว โดยไม่จำเป็นต้องใช้ไลบรารี