CSS กลางจอ
ใช้ text-align ในการจัดให้ ข้อความอยู่ตรงกลางมา

ต่อไปเราจะมาดูวิธีการจัดด้วย margin กัน

ถ้าเราต้องการให้มันอยู่ตรงกลาง กรอบนอก ต้องใหญ่กว่าสิ่งที่อยู่ภายใน

กฏข้อที่ 1 กลางจอได้ ต้องอ้างอิงจากกรอบภายนอก
เขียนแบบนี้ ไม่กลาง เพราะมันไม่รู้จะไปกลางกับอะไร
<div style=”margin:0 auto”>Center</div>

เขียนแบบนี้กลางได้ เพราะ อ้างอิงกับ div นอก
<div><div style=”margin:0 auto”>Center</div> </div>

div ข้างในจะจัดอยู่กลาง div ภายนอก

กฏข้อที่ 2 div ภายนอก ต้องใหญ่กว่าภายใน เพื่อให้สังเกตุได้ว่ามันอยู่ตรงกลาง เช่น

<div style="width:200px"><div style="width:100px;margin:0 auto">Center</div> </div>

CSS : จัด div ที่เราต้องการ ให้อยู่กึ่งกลาง
สมมติว่าเรามี div จะให้มันอยู่ตรงกลาง
div ตัวนี้กว้าง 200px และสูง 100px
ใช้ position แล้วให้ top:50% กับ left:50% แล้ว มันน่าจะอยู่ตรงกลาง

#box{
width:200px;
height:100px;
position:fixed;
top:50%;
left:50%;
}

ตำแหน่งที่มันใช้วางตำแหน่ง จะยึดหลักไว้ที่มุมด้านซ้ายบน ทำให้ top:50%; left:50%; ให้ผลลัพธ์ในแบบนี้
ดังนั้นเราจะทำต่อโดยใช้ margin เพื่อดึง div ให้มาอยู่ตรงกึ่งกลาง
คราวนี้ค่าที่เราจะใช้คิดค่ามาจากเอาความกว้างหาร 2 แล้วนำไปใส่เป็นค่าลบให้ margin-left และเอาค่าความสูงหาร 2 แล้วนำไปใส่เป็นลบให้ margin-top ซึ่งความกว้าง 200px และความสูง 100px จึงได้ค่าออกมาเป็น

#box{
width:200px;
height:100px;
position:fixed;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-50px;
}

จะทำให้ div ขยับตามที่เราตั้งค่าไว้

http://rabbitinblack.com/2011/10/css-middle/