CSS กลางหน้าจอ ด้วยคำสั่ง position: absolute

สอนเขียนคำสั่งภาษา CSS แสดง div กลางหน้าจอ ด้วยคำสั่ง position: absolute ร่วมกับกำหนดค่า top, left และ margin-top, margin-left โดยตัวอย่างกำหนดเป็น Id และนำมาใช้กับ div เพื่อแสดงผลที่หน้าเว็บไซต์ สามารถเขียนคำสั่งได้ดังนี้

ตัวอย่าง CSS กลางหน้าจอ ด้วยคำสั่ง position: absolute

<style>
    #center_screen {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -50px;
    }
</style>

<div id="center_screen">Hello Devdit</div>

CSS กลางหน้าจอ แนะนำให้ใช้คำสั่ง position: absolute เพื่อให้จัดตำแหน่งของ elements ได้อย่างอิสระ โดยจัดตำแหน่งร่วมกับคำสั่ง top, left และ margin-top, margin-left ตัวอย่างสร้าง Id ชื่อ center_screen และนำใช้กับ div เพื่อแสดง element ที่ต้องการกลางหน้าจอ