此处讨论的是,在一个父容器中只有一个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;}
}