วิธีจัดกึ่งกลางทุกอย่างด้วย CSS - จัดแนว Div, Text และอื่น ๆ

การจัดศูนย์กลางเป็นหนึ่งในแง่มุมที่ยากที่สุดของ CSS

วิธีนี้มักจะไม่ยากที่จะเข้าใจ แต่มันมากกว่านั้นเนื่องจากมีหลายวิธีที่จะทำให้สิ่งต่างๆเป็นศูนย์กลาง

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

ในบทช่วยสอนนี้เราจะพูดถึงวิธีจัดองค์ประกอบต่างๆในแนวนอนแนวตั้งและแนวตั้งและแนวนอน

วิธีจัดกึ่งกลางแนวนอน

โดยทั่วไปการจัดองค์ประกอบที่อยู่ตรงกลางในแนวนอนนั้นง่ายกว่าการจัดองค์ประกอบให้อยู่ตรงกลางในแนวตั้ง นี่คือองค์ประกอบทั่วไปบางส่วนที่คุณอาจต้องการจัดกึ่งกลางแนวนอนและวิธีต่างๆในการทำ

วิธีจัดกึ่งกลางข้อความด้วยคุณสมบัติ CSS Text-Align Center

หากต้องการจัดกึ่งกลางข้อความหรือลิงก์ในแนวนอนให้ใช้text-alignคุณสมบัติที่มีค่าcenter:

Hello, (centered) World!

p { text-align: center; }

วิธีจัดกึ่งกลาง Div ด้วย CSS Margin Auto

ใช้marginคุณสมบัติชวเลขที่มีค่า0 autoเพื่อจัดกึ่งกลางองค์ประกอบระดับบล็อกเช่นdivแนวนอน:

.child { ... margin: 0 auto; }

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

Flexbox เป็นวิธีที่ทันสมัยที่สุดในการจัดวางสิ่งต่างๆบนหน้าเว็บและทำให้การออกแบบเค้าโครงที่ตอบสนองง่ายกว่าที่เคยเป็นมา อย่างไรก็ตามไม่ได้รับการสนับสนุนอย่างสมบูรณ์ในเบราว์เซอร์เดิมบางอย่างเช่น Internet Explorer

ในการจัดกึ่งกลางองค์ประกอบในแนวนอนด้วย Flexbox เพียงแค่ใช้display: flexและjustify-content: centerกับองค์ประกอบหลัก:

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

วิธีตั้งศูนย์ในแนวตั้ง

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

วิธีจัดกึ่งกลาง Div ในแนวตั้งด้วย CSS Absolute Positioning และ Negative Margins

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

ครั้งแรกที่ตั้งทรัพย์สินขององค์ประกอบหลักในการdisplayrelative

จากนั้นสำหรับองค์ประกอบลูกตั้งค่าdisplayคุณสมบัติเป็นabsoluteและtopเป็น50%:

.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically */ position: absolute; top: 50%; }

แต่นั่นเป็นเพียงแนวตั้งที่กึ่งกลางขอบด้านบนขององค์ประกอบลูก

หากต้องการให้องค์ประกอบลูกอยู่ตรงกลางอย่างแท้จริงให้ตั้งค่าmargin-topคุณสมบัติเป็น-(half the child element's height):

.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically */ position: absolute; top: 50%; margin-top: -25px; /* half this element's height */ }

วิธีจัดกึ่งกลาง Div ในแนวตั้งด้วยการแปลงและแปล

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

วิธีนี้คล้ายกับวิธีระยะขอบลบด้านบนมาก ตั้งค่าคุณสมบัติขององค์ประกอบหลักในการdisplayrelative

สำหรับองค์ประกอบเด็กตั้งค่าdisplayคุณสมบัติการabsoluteและการตั้งค่าไปtop 50%ตอนนี้แทนที่จะใช้ระยะขอบลบเพื่อจัดองค์ประกอบลูกให้อยู่กึ่งกลางอย่างแท้จริงให้ใช้transform: translate(0, -50%):

.container { ... position: relative; } .child { ... position: absolute; top: 50%; transform: translate(0, -50%); }

ทราบว่าtranslate(0, -50%)มีการจดชวเลขและtranslateX(0) translateY(-50%)คุณยังสามารถเขียนtransform: translateY(-50%)ให้กึ่งกลางองค์ประกอบลูกในแนวตั้ง

วิธีจัดกึ่งกลาง Div ในแนวตั้งด้วย Flexbox

เช่นเดียวกับการจัดกึ่งกลางสิ่งของในแนวนอน Flexbox ทำให้ง่ายต่อการจัดกึ่งกลางสิ่งของในแนวตั้ง

หากต้องการจัดองค์ประกอบในแนวตั้งให้ใช้display: flexและalign-items: centerกับองค์ประกอบหลัก:

.container { ... display: flex; align-items: center; }

วิธีจัดกึ่งกลางทั้งแนวตั้งและแนวนอน

วิธีจัดกึ่งกลาง Div ในแนวตั้งและแนวนอนด้วย CSS Absolute Positioning และ Negative Margins

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

ตั้งค่าคุณสมบัติขององค์ประกอบหลักในการdisplayrelative

จากนั้นตั้งค่าของเด็กdisplayคุณสมบัติการabsolute, topการ50%และการleft 50%นี่เป็นเพียงศูนย์กลางมุมซ้ายบนขององค์ประกอบลูกในแนวตั้งและแนวนอน

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

.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically and horizontally */ position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; /* apply negative top and left margins to truly center the element */ }

วิธีจัดกึ่งกลาง Div ในแนวตั้งและแนวนอนด้วยการแปลงและแปล

Use this method to center an element vertically and horizontally if you don't know its exact dimensions and can't use Flexbox.

First, set the display property of the parent element to relative.

Next, set the child element's display property to absolute, top to 50%, and left to 50%.

Finally, use transform: translate(-50%, -50%) to truly center the child element:

.container { ... position: relative; } .child { ... position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

How to Center a Div Vertically and Horizontally with Flexbox

Flexbox is the easiest way to center an element both vertically and horizontally.

This is really just a combination of the two previous Flexbox methods. Then apply justify-content: center and align-items: center to center the child element(s) horizontally and vertically:

.container { ... display: flex; justify-content: center; align-items: center; }

That's everything you need to know to center with the best of 'em. Now go forth and center all the things.