聯成電腦網頁設計教學：CSS置中的6個方法
文、菜鳥編
在Office中，一個按鈕就可以讓你隨意的水平置中、垂直置中，但在網頁設計，可就沒有這麼輕鬆，尤其是在垂直置中，對於觀念沒有很正確的人來說，可能就已經殺死你一堆腦細胞了。如果你很常殘害你的腦瓜子，相信今天這一文章就可以幫你解決大部分的問題了。
方法一、行高(line-height)
早期最常使用的方法，但只能針對單行文字有效，以下圖來說，當設定了line-height與div的高相同時，單行文字是完全置中，但右圖可以看到當多行文字時，就會有問題發生，主要是因為TEXT1與TEXT2的行高也為100px造成。
HTML：
div class=outBox
TEXT
/div
CSS：
.outBox{
width: 100px;
height: 100px;
background-color: #2D9;
text-align: center;
color: #FFF;
line-height: 100px;
}
方法二、偽元素(before、after)
使用「vertical-align: middle」搭配偽元素就將區塊完全置中，以下圖來說，將before、after偽元素與innerBox設定為「inline-block」，使用vertical-align: middle後，三個元素就相互垂直置中。
HTML：
div class=outBox2
div class=innerBox/div
/div
CSS：
.outBox2{
width: 100px;
height: 100px;
background-color:#2D9;
text-align: center;
}
.outBox2:before, .outBox2:after {
content: ;
width: 10px;
height: 10px;
background-color: #999;
display: inline-block;
vertical-align: middle;
}
.innerBox2{
width: 50px;
height: 50px;
background-color: #D92;
display: inline-block;
vertical-align: middle;
}
要達到在OutBox2元素中置中，只要將偽元素的寬度取消，高度設為100%，就可以完成下圖的置中了。
當然，多行文字就不是問題了。
方法三、使用position(calc運算法)
在沒有flexbox前，最多使用的就是position來定位置中，常見的有「使用calc運算語法」、「使用transform位移」、「使用margin定位」，這邊我們先介紹使用calc運算法，另兩個分別在後面說明。
使用定位方式都需將外層父級元素的定位為相對定位，子元素設定為絕對定位，再透過top與left來定位置中。以下圖來說，左圖設定top:50% ， left:50%，可以發現並未置中，因為定位點是以子元素左上角為定位點，如果要達到置中效果，則須再在目前的定位減去子元素的寬度與高度的一半，如右圖。
修正top與left的定位，就可達到置中，記得減號兩邊必須有空格
top: calc(50% - 15px);
left: calc(50% - 15px);
HTML：
div class=outBox3
div class=innerBox2/div
/div
CSS：
.outBox3{
width: 100px;
height: 100px;
background-color:#2D9;
position: relative;
}
.innerBox3{
width: 30px;
height: 30px;
background-color: #D92;
position: absolute;
top: calc(50% - 15px);
left: calc(50% - 15px);
}
方法四、使用position(transform位移)
這方法與前述有點類似，差別在於這邊我們是透過位移方式來完成，在內部元素CSS中加上transform: translate(-50%,-50%); ，分別向左與向上方向移動，各為元素寬度與高度的50%，也就是向左位移20px，向上位移15px。
HTML：
div class=outBox4
div class=innerBox4/div
/div
CSS：
.outBox4{
width: 100px;
height: 100px;
background-color:#2D9;
position: relative;
}
.innerBox4{
width: 40px;
height: 30px;
background-color: #D92;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
方法五、使用position(margin定位)
只要將top、right、bottom、left的定位設定為0，加上magrin: auto;，就可以達到置中的效果，如下圖，如果只有設定top與bottom為0，就是垂直置中。
HTML：
div class=outBox5
div class=innerBox5/div
/div
CSS：
.outBox5{
width: 100px;
height: 100px;
background-color:#2D9;
position: relative;
}
.innerBox5{
width: 50px;
height: 60px;
background-color: #D92;
position: absolute;
margin: auto;
top: 0;
/*left: 0;*/
bottom: 0;
/*right: 0;*/
}
方法六、使用flex
CSS3的普及及RWD布局關係，Flexbox被廣泛使用，只要將父級元素設定為flex，指定水平對齊(justify-content)與垂直對齊(align-items)就可以完成置中。
HTML：
div class=outBox6
div class=innerBox6/div
/div
CSS：
.outBox6{
width: 100px;
height: 100px;
background-color:#2D9;
display: flex;
justify-content: center;
align-items: center;
}
.innerBox6{
width: 30px;
height: 30px;
background-color: #D92;
}
Flexbox的好處就是當內層加入其它元素時，會自動調整布局，以下圖來說，在內部又加上class=innerBox6-2的塊級元素，原有元素不受影響仍垂直置中，水平部分就會依照內部元素來平均分配。
HTML：
div class=outBox6
div class=innerBox6/div
div class=innerBox6-2/div
/div
CSS：
.outBox6{
width: 100px;
height: 100px;
background-color:#2D9;
display: flex;
justify-content: center;
align-items: center;
}
.innerBox6{
width: 30px;
height: 30px;
background-color: #D92;
}
.innerBox6-2{
width: 20px;
height: 50px;
background-color: #2AD;
}
結論：
相信這六種方法，可以幫你解決大部分置中的問題，語法是死的，但用法是活的，依照設計的需求，選定適合的方法就能事半功倍。
如果你覺得這篇文章很實用，也別忘了分享給你的親友們喔！
痞客邦Blog：http://lccnetvip.pixnet.net/blog
FB粉絲團：https://www.facebook.com/lccnetzone
菜鳥救星：https://www.facebook.com/greensn0w
zoom教室下載
