接觸CSS的初級網(wǎng)頁設(shè)計師們都會碰到這樣的一個問題？
css 里面怎么讓一個DIV居中 ?
CSS怎么讓?圖片在DIV里面居中呢？
怎么寫CSS樣式才可以完美解決CSS 居中問題呢等等類似疑問都會冒出來。那么今天，html5模版網(wǎng)(m.suosuyi.cn)老譚跟大家來講解下如何讓DIV 或圖片居中。
其實CSS居中的問題包括水平居中，垂直居中等。
一、單行內(nèi)容的居中
只考慮單行是最簡單的，無論是否給容器固定高度，只要給容器設(shè)置?line-height?和?height，并使兩值相等，再加上?over-flow: hidden?就可以了。
二、多行內(nèi)容居中，且容器高度可變
也很簡單，給出一致的 padding-bottom 和 padding-top 就行。
三、把容器當(dāng)作表格單元
CSS 提供一系列diplay屬性值，包括
display: table,
display: table-row,
display: table-cell 等，能把元素當(dāng)作表格單元來顯示。這是再加上 vertical-align: middle, 就和表格中的 valign=”center” 一樣了。
四、屏幕或當(dāng)期可視區(qū)域居中問題
這里就運用絕對定位position:absolute; width:300px; height:300px; top:50%; left:50%; margin-left:-150px; margin-top:-150px; 等來實現(xiàn)div相對于可視區(qū)域來居中問題。
五、DIV +CSS 居中代碼
div{width:200px; height:200px; margin:0 auto;} 重點在于margin：0 auto；意思就是上下為0個像素。左右是自適應(yīng)的。換句話說就是居中。
六、CSS設(shè)置圖片居中的方法
.box {
/*非IE的主流瀏覽器識別的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/*設(shè)置水平居中*/
text-align:center;
/* 針對IE的Hack */
*display: block;
*font-size:175px;/*約為高度的0.873，200*0.873 約為175*/
*font-family:Arial;/*防止非utf-8引起的hack失效問題，如gbk編碼*/
width:200px;
height:200px;
border: 1px solid #eee;
}
.box img {
/*設(shè)置圖片垂直居中*/
vertical-align:middle;
}
七、text-align:center;的合理使用
text-align:center;可以用于單行文本，也可以用容器之內(nèi)。