实现垂直居中的几种方法（垂直居中在哪儿）

实现垂直居中的几种方法

<div class="box box1">

<span>垂直居中</span>

</div>

已知父级元素高度或子元素高度的实现方法：

1.已知子元素的高度:

.box1{position:relative;}

.box1 span{

position: absolute;

width:100px;

height: 50px;

top:50%;

left:50%;

margin-left:-50px;

margin-top:-25px;

text-align: center;

}

2.父级元素必须写清高度:

.box1{

height:300px;

display: flex;

display: -webkit-flex;

justify-content:center;//子元素水平居中

align-items:center; //子元素垂直居中

}

设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效

3.需要确定子元素的高度，可以用百分比，比较适合移动端

.box3 span{

width: 50%;

height: 50%;

background: #000;

overflow: auto;

margin: auto;

position: absolute;

top: 0; left: 0; bottom: 0; right: 0;

}

4.已知父级元素的高度:

.box1{

height:100px;

line-height:100px;

}

未知父级元素高度或子元素高度的实现方法：

1.未知子元素的高度:

使用transform有一个缺陷，就是当计算结果含有小数时（比如 0.5），会让整个元素看起来是模糊的，一种解决方案就是为父级元素设置transform-style: preserve-3d样式。

.box1{

position:relative;

-webkit-transform-style:preserve-3d;

-moz-transform-style: preserve-3d;

transform-style: preserve-3d;

}

.box1 span{

position: absolute;

top:50%;

left:50%;

width:100%;

-webkit-transform:translate(-50%,-50%);

-moz-transform:translate(-50%,-50%);

-ms-transform:translate(-50%,-50%);

transform:translate(-50%,-50%);

text-align: center;

}

2..box1{

display: table;

width: 100%;

}

.box1 span

display: table-cell;

vertical-align: middle;

text-align: center;

}

3.这个方法要求待居中的元素(span)是 inline-block，不是一个真正通用的方案，使用before伪元素也一样。

.box1{

position:relative;

text-align:center;

height:300px;

}

.box1:after{

content:'';

width:0;

height:100%;

display:inline-block;

vertical-align:middle;

}

.box1 span{

vertical-align:middle;

display:inline-block;

}

4..box1{

display: flex;

text-align: center;

}

.box7 span{

margin: auto;

}

5..box1{

display: -webkit-box;

-webkit-box-pack:center;

-webkit-box-align:center;

-webkit-box-orient: vertical;

text-align: center;

}

6.display:-webkit-box这种方法，在content元素外插入一个 div.floater。设置.floater{height:50%; margin-bottom:-content的height};。

content清除浮动，并显示在中间。

<div></div>

<div> Content here </div>

.floater {

float:left;

height:50%;

margin-bottom:-120px;

}

.content {

clear:both;

height:240px;

position:relative;

}