前端开发 ·

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

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

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

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

怎么写CSS样式才可以完美解决CSS 居中问题呢等等类似疑问都会冒出来。那么今天,25学堂老谭跟大家来讲解下如何让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;可以用于单行文本,也可以用容器之内。

参与评论