css实现垂直居中6,6种不同的CSS实现垂直水平居中

6种不同的CSS实现垂直水平居中：

Custom Analytics Model

.box{

width: 200px;

height: 200px;

background: #cccccc;

margin-top: 10px;

}

.box1{

display: table-cell;

vertical-align: middle;

text-align: center;

}

.box1 span{

display: inline-block;

}

.box2{

display: flex;

justify-content:center;

flex-direction:column;

text-align: center;

}

.box3{position:relative;}

.box3 div{

position: absolute;

top:50%;

left:50%;

width:100%;

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

text-align: center;

}

.box3 span{

display: inline-block;

}

.box4{

text-align:center;

font-size:0;

}

.box4 div{

vertical-align:middle;

display:inline-block;

font-size:16px;

}

.box4 span{

display: inline-block;

}

.box4:after{

content:'';

width:0;

height:100%;

display:inline-block;

vertical-align:middle;

}

.box5{

display: flex;

text-align: center;

}

.box5 div{

margin: auto;

}

.box5 span{

display: inline-block;

}

.box6{

display: -webkit-box;

-webkit-box-pack:center;

-webkit-box-align:center;

-webkit-box-orient: vertical;

text-align: center;

}

.box6 span{

display: inline-block;

}

1垂直居中垂直居中垂直居中垂直居中垂直居中

垂直居中

2垂直居中垂直居中垂直居中垂直居中垂直居中

垂直居中

3垂直居中垂直居中垂直居中垂直居中垂直居中

垂直居中

4垂直居中垂直居中垂直居中垂直居中垂直居中

垂直居中

5垂直居中垂直居中垂直居中垂直居中垂直居中

垂直居中

6垂直居中垂直居中垂直居中垂直居中垂直居中

垂直居中