Devdit
 

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

2.2K

สอนเขียนคำสั่งภาษา 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 ที่ต้องการกลางหน้าจอ

แก้ไข 2 ปีที่แล้ว
ชอบ
ลิ้งก์
แชร์
Devdit มีช่อง YouTube แล้ว
เราสร้างวิดีโอเกี่ยวกับเทคโนโลยี ทำตามง่ายๆ