简单方便的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;:

200px;

height:200px;

top:0;

bottom:0;

margin:auto;}

}

原文地址:https://www.cnblogs.com/lihongfei0602/p/4242691.html