วิธีจัดกึ่งกลาง (ทั้งแนวตั้งและแนวนอน)
Published in
1 min readJun 28, 2014
โดยปกติแล้ว หากเราอยากจะให้ element หนึ่ง อยู่กึ่งกลางของ container ทั้งในแนวตั้งและในแนวนอน เราก็จะต้องเขียนโค้ดแบบนี้
<div class="box">BOX</div>.box {
width: 200px;
height: 100px;/* สไตล์สำหรับจัดให้อยู่กึ่งกลาง */
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px; /* -(height/2) */
margin-left: -100px; /* -(width/2) */
}
เพื่อความสะดวก เราอาจใช้ Mixin ของ Sass เข้ามาช่วยก็ได้ โดยค่าที่จะต้องส่งไปให้ Mixin นี้ก็คือ width และ height ของ element นั้นๆ นั่นเอง@mixin center($width, $height){
position: absolute;
top: 50%;
left: 50%;
margin-top: -($height/2)+px;
margin-left: -($width/2)+px;
}
.box{
width: 200px;
height: 100px;
@include center(200, 100);
}เมื่อลองพรีวิว ก็จะเห็นว่า Mixin นี้ ทำให้ .box อยู่กึ่งกลางของ body ทั้งในแนวตั้งและในแนวนอน[codepen_embed height="257" theme_id="6932" slug_hash="FhEkI" default_tab="result"]See the Pen <a href='http://codepen.io/suranartnc/pen/FhEkI/'>FhEkI</a> by Suranart Niamcome (<a href='http://codepen.io/suranartnc'>@suranartnc</a>) on <a href='http://codepen.io'>CodePen</a>.[/codepen_embed]อย่างไรก็ตาม Mixin นี้ก็มีข้อเสียตรงที่เราจะต้องกำหนด width และ height เอาไว้ด้วยเสมอ เพราะจะต้องนำไปหาร 2 แล้วเอาไปใส่เป็น margin นั่นหมายความว่า Mixin นี้ ไม่สามารถใช้กับ element ที่กำหนด width และ height เป็น % ได้ วิธีแก้ก็คือให้เปลี่ยนมาใช้ translate แทน ลองดูตัวอย่างด้านล่างนี้@mixin centerCSS3(){
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box{
width: 50%;
height: 50%;
@include centerCSS3;
}เมื่อลองพรีวิว จะเห็นว่า Mixin นี้ ยังสามารถใช้กับ .box ได้อยู่ ถึงแม้ว่ามันจะกำหนด width และ height เป็น % อย่างไรก็ตาม Mixin นี้ จะใช้ได้กับ web browser ที่รองรับ CSS3 แล้วเท่านั้น (IE9+)[codepen_embed height="257" theme_id="6932" slug_hash="KgECm" default_tab="result"]See the Pen <a href='http://codepen.io/suranartnc/pen/KgECm/'>KgECm</a> by Suranart Niamcome (<a href='http://codepen.io/suranartnc'>@suranartnc</a>) on <a href='http://codepen.io'>CodePen</a>.[/codepen_embed]
