純CSS實現垂直居中

在別處看的，保存一下。

1.table-cell

display: table-cell;
vertical-align: middle;
 text-align: center;      

2.flex

display: flex;
justify-content:center;
align-items:Center;

3.絕對定位和負邊距（明確寬度和高度）

position: absolute;
width:100px;
height: 50px;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-25px;
text-align: center;

4.絕對定位和0

width: 50%; 
height: 50%; 
background: #000;
overflow: auto; 
margin: auto; 
position: absolute; 
top: 0; left: 0; bottom: 0; right: 0; 

5.translate

position: absolute;
top:50%;
left:50%;
width:100%;
transform:translate(-50%,-50%);
text-align: center;

6.通過:after來佔位

.box7{
  text-align:center;
  font-size:0;
}
.box7 span{
  vertical-align:middle;
  display:inline-block;
  font-size:16px;
}
.box7:after{
  content:'';
  width:0;
  height:100%;
  display:inline-block;
  vertical-align:middle;
}

7.display:flex和margin:auto

.box8{
    display: flex;
    text-align: center;
}
.box8 span{margin: auto;}

8.display:-webkit-box

display: -webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
-webkit-box-orient: vertical;
text-align: center

9.display:-webkit-box

<div class="floater"></div>  
<div class="content"> Content here </div>  

.floater {
    float:left; 
    height:50%; 
    margin-bottom:-120px;
}
.content {
    clear:both; 
    height:240px; 
    position:relative;
}