CSS 页面布局方法【垂直居中】

一、使用垂直居中属性存在的问题

在CSS中垂直居中定义属性vertical-align，但是只能用作内联元素。

二、使用边界属性定义垂直居中存在的问题

使用margin:auto 0;无法使快元素中的内容垂直居中。（无效）

三、容器和内容大小固定的垂直居中

1.父元素的补白属性定义垂直居中

.div1{

margin:50px 0 0;

width:500px;
height:150px;
background:#666666;
border:4px solid #000000;
}

.div2{
width:200px;
height:100px;
background:#999999;
border:1px solid #000000;
}

<div class-"div1">
<div class="div2">这里是需要居中的内容</div>
</div>

2.子元素的边界属性定义垂直居中

.div1{
width:500px;
height:200px;
background:#666666;
border:4px solid #000000;
}

.div2{
margin:50px 0 0;
width:200px;
height:100px;
background:#999999;
border:1px solid #000000;
}

<div class-"div1">
<div class="div2">这里是需要居中的内容</div>
</div>

3.使用子元素的定位属性定义垂直居中

.div1{
width:500px;
height:200px;
background:#666666;
border:4px solid #000000;
}

.div2{
position:relative;

top:50px;

width:200px;
height:100px;
background:#999999;
border:1px solid #000000;
}

<div class-"div1">
<div class="div2">这里是需要居中的内容</div>
</div>

四、内容大小固定的垂直居中

.div1{
width:500px;
height:200px;
background:#666666;
border:4px solid #000000;
}

.div2{
position:relative;

top:50%;

margin-top:-50px;

width:200px;
height:100px;
background:#999999;

border:1px solid #000000;

}

<div class-"div1">
<div class="div2">这里是需要居中的内容</div>
</div>

五、容器大小固定的垂直居中

.div{
float:left;
width:250px;
height:200px;
background:#666666;
border:4px solid #000000;
}
.div1{
line-height:200px;
font-size:179pxl
}
.img{
height:100px;
vertical-align:middle;
}
<div class-"div1">
<img src="images/pic.gif" alt="pic" />
</div>
<div></div>

六、内容大小和容器大小均不固定的垂直居中

.father{
position:relative;
width:500px;
height:200px;
border:4px solid #000000;
}

.in{
position:absolute;
top:50%;
}

.son{
position:relative;
top:-50%;
width:200px;
height:100px;
background:#999999;
border:2px solid #000000;
}

<div class="father">　　
　　<div class="in">
　　　　<div class="son">这里的内容显示部分</div>
　　</div></div>