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

โดยปกติแล้ว หากเราอยากจะให้ element หนึ่ง อยู่กึ่งกลางของ container ทั้งในแนวตั้งและในแนวนอน เราก็จะต้องเขียนโค้ดแบบนี้

เพื่อความสะดวก เราอาจใช้ Mixin ของ Sass เข้ามาช่วยก็ได้ โดยค่าที่จะต้องส่งไปให้ Mixin นี้ก็คือ width และ height ของ element นั้นๆ  นั่นเอง

เมื่อลองพรีวิว ก็จะเห็นว่า Mixin นี้ ทำให้ .box อยู่กึ่งกลางของ body ทั้งในแนวตั้งและในแนวนอน

See the Pen FhEkI by Suranart Niamcome (@suranartnc) on CodePen.

อย่างไรก็ตาม Mixin นี้ก็มีข้อเสียตรงที่เราจะต้องกำหนด width และ height เอาไว้ด้วยเสมอ เพราะจะต้องนำไปหาร 2 แล้วเอาไปใส่เป็น margin นั่นหมายความว่า Mixin นี้ ไม่สามารถใช้กับ element ที่กำหนด width และ height เป็น % ได้ วิธีแก้ก็คือให้เปลี่ยนมาใช้ translate แทน ลองดูตัวอย่างด้านล่างนี้

เมื่อลองพรีวิว จะเห็นว่า Mixin นี้ ยังสามารถใช้กับ .box ได้อยู่ ถึงแม้ว่ามันจะกำหนด width และ height เป็น % อย่างไรก็ตาม Mixin นี้ จะใช้ได้กับ web browser ที่รองรับ CSS3 แล้วเท่านั้น (IE9+)

See the Pen KgECm by Suranart Niamcome (@suranartnc) on CodePen.

(Visited 6,143 times, 3 visits today)

One Response to “วิธีจัดกึ่งกลาง (ทั้งแนวตั้งและแนวนอน)”

  1. Sappawish Siripon says:

    ข้อเสียของวิธีแรกอีกข้อคือ ถ้าความกว้าง หรือความสูงน้อยกว่า div ของเรา จะโดนขอบ windows crop หายไปและไม่เกิด scroll ครับ ส่วนวิธีที่ 2 ไม่เป็นครับ

Leave a Reply