简单方便的div垂直居中。

标签：

此处讨论的是，在一个父容器中只有一个DIV，这个DIV相对于父元素垂直居中的问题：

以下列举三种方式：这里为了层次清晰，都是采用的sass写法。

一：适用于子元素有具体的宽高

.wrap{

//父元素可以不定义任何属性

.content{

position:absolute;

height:100px;

top:50%;

margin-top:-50px;//自身高度的一半}}

二：适用于子元素和父元素都没有具体的宽高

.wrap{

display:table;//父元素必须要有的样式属性

.content-wrap{

display:table-cell;

vertical-align:middle;

//子元素必须有的样式，其实是借用table布局。

.content{

//不需要定义任何样式，就会再content-wrap里面居中

}}}

三：适用于子元素有固定的高宽

.wrap{

position:relative;

.content{

position:absolute;:

width:200px;

height:200px;

top:0;

bottom:0;

margin:auto;}

}

简单方便的div垂直居中。

标签：

原文地址：http://www.cnblogs.com/lihongfei0502/p/4242691.html