垂直居中

1.使用定位

1
2
3
4
position: absolute;
left: 50%;
top: 50%;
transform:translateY(-50%);

2.table布局

1
2
3
4
5
<div class="something-semantic">
   <div class="something-else-semantic">
       Unknown stuff to be centered.
   </div>
</div>
1
2
3
4
5
6
7
8
9
.something-semantic {
   display: table;
   width: 100%;
}
.something-else-semantic {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

3.flex布局

1
2
3
4
5
.box2{
    display: flex;
    justify-content:center;
    align-items:Center;
}