CSS 居中实例详解-25学堂CSS原创教程【一】

接触CSS的初级网页设计师们都会碰到这样的一个问题？

css 里面怎么让一个DIV居中 ?

CSS怎么让 图片在DIV里面居中呢？

怎么写CSS样式才可以完美解决CSS 居中问题呢等等类似疑问都会冒出来。那么今天，html5模版网(www.html5code.net)老谭跟大家来讲解下如何让DIV 或图片居中。

其实CSS居中的问题包括水平居中，垂直居中等。

一、单行内容的居中
只考虑单行是最简单的，无论是否给容器固定高度，只要给容器设置 line-height 和 height，并使两值相等，再加上 over-flow: hidden 就可以了。

二、多行内容居中，且容器高度可变
也很简单，给出一致的 padding-bottom 和 padding-top 就行。

三、把容器当作表格单元
CSS 提供一系列diplay属性值，包括

display: table,

display: table-row,

display: table-cell 等，能把元素当作表格单元来显示。这是再加上 vertical-align: middle, 就和表格中的 valign=”center” 一样了。

四、屏幕或当期可视区域居中问题

这里就运用绝对定位position:absolute; width:300px; height:300px; top:50%; left:50%; margin-left:-150px; margin-top:-150px; 等来实现div相对于可视区域来居中问题。

五、DIV +CSS 居中代码

div{width:200px; height:200px; margin:0 auto;} 重点在于margin：0 auto；意思就是上下为0个像素。左右是自适应的。换句话说就是居中。

六、CSS设置图片居中的方法

.box {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;

/*设置水平居中*/
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 {
/*设置图片垂直居中*/
vertical-align:middle;
}

七、text-align:center;的合理使用

text-align:center;可以用于单行文本，也可以用容器之内。