HTML กลางจอ กลางเว็บไซต์ ด้วยภาษา CSS

สอนเขียน HTML กลางจอ กลางเว็บไซต์ ด้วยภาษา CSS บทความนี้แนะนำการใช้ภาษา CSS เพื่อจัดตำแหน่งของ div หรือ elements ให้อยู่ตรงกลางหน้าจอของเว็บไซต์ที่พัฒนาด้วย HTML สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง HTML กลางจอ กลางเว็บไซต์ ด้วยภาษา CSS

<style>
    .center_screen {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -50px;
        width: auto;
        height: auto;
        text-align: center;
        border: solid 1px blue;
        padding: .5rem;
    }
</style>

<div class="center_screen">div นี้อยู่กลางจอเสมอ</div>

HTML กลางจอ แนะนำให้ใช้คำสั่งของ CSS โดยกำหนด div ให้เป็น position: absolute และกำหนดค่า top และ left เท่ากับ 50% จากนั้นกำหนด margin-top และ margin-left เท่ากับ -50% จะทำให้ div หรือ elements อยู่กลางหน้าจอของเว็บไซต์