css设置div在网页中垂直居中

css设置div在网页中垂直居中

css设置div在网页中垂直居中方法很多，这是本人常用的方法

我们要做一个在网页中垂直水平方向都居中的一个div来作一个如下效果的框

本实例以新文档开始

先放置一个div，并且设置class名为aa，它的:before需要这些必要css样式：

.aa:before{

content:"";

display:inline-block;

height:100%;

width:0;

margin-left:-.25em;//这里是为了去除inline-block的空隙的影响

}

在.aa中放置一个div，并且设置class名为aaa，赋予它必要的css属性：

.aa>.aaa{

display:inline-block;

vertical-align: middle;

}

以上，我们已经做到了最基本的“垂直居中”的要求

为了美化，接下来做到如下效果

继续添加样式：

html,body{

padding:0;

margin:0;

height:100%;

width:100%;

}

.aa{

width:100%;

height:100%;

text-align:center;

}

.aaa{

width:600px;

height:220px;

background:#666;

color:#fff;

font-size:40px;

font-family:"Comic Sans MS", cursive;

text-align:center;

line-height:220px;

}

至此，已完成