转自：https://blog.csdn.net/BIG_LEE_SHOW/article/details/79246182
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body{
100%;
height:100%;
}
/*理解-webkit-box-flex的用法*/
.parent1{
/*首先定义父元素display:-webkit-box; 这个属性必须给父元素，所有的属性都是用来控制子元素的*/
display: -webkit-box;
-webkit-box-pack: center; /*让元素水平居中，还有其他属性，官方文档有解释*/
-webkit-box-align: center; /*让元素垂直居中，包含其他属性，官方文档有解释*/
margin: 0 auto;
100%;
height: 100%;
}
.child1{
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
background-color: red;
-webkit-box-flex:1;
/*box-flex里面可以添加任意数字包括小数，可以让整个子元素针对父元素的宽度按百分比例进行划分*/
}
.child2{
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
background-color: #ddd;
-webkit-box-flex:2;
}
.child3{
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
background-color: #ddd;
-webkit-box-flex:3;
}
.child4{
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
background-color: #ddd;
-webkit-box-flex:4;
}
/*让子元素水平垂直居中*/
/*为了浏览器兼容，所以将代码补全*/
.parent2{
100%;
height:100%;
display: -webkit-box;
display:box;
display: -o-box;
display:-moz-box;
box-pack:center;
-webkit-box-pack:center;
-o-box-pack:center;
-moz-box-pack:center;
box-align:center;
-webkit-box-align:center;
-o-box-align:center;
-moz-box-align:center;
}
/*没有文字的DIV*/
.child5{
200px;
height:200px;
background-color:#eee;
}
/*有文字的DIV*/
/*如果希望里面的文字居中，就在里面再加一个div，将文字写在div里*/
.parent3{
100%;
height:100%;
display: -webkit-box;
display:box;
display: -o-box;
display:-moz-box;
box-pack:center;
-webkit-box-pack:center;
-o-box-pack:center;
-moz-box-pack:center;
box-align:center;
-webkit-box-align:center;
-o-box-align:center;
-moz-box-align:center;
}
.child6{
200px;
height:200px;
display: -webkit-box;
display:box;
display: -o-box;
display:-moz-box;
background-color:#eee;
box-pack:center;
-webkit-box-pack:center;
-o-box-pack:center;
-moz-box-pack:center;
box-align:center;
-webkit-box-align:center;
-o-box-align:center;
-moz-box-align:center;
}
</style>
</head>
<body>
<!-- 理解box-flex -->
<div class="parent1">
<div class="child1">1</div>
<div class="child2">2</div>
<div class="child3">3</div>
<div class="child4">4</div>
</div>
<!-- 块元素垂直居中 -->
<div class="parent2">
<div class="child5">
</div>
</div>
<!-- 块元素里包含文字垂直居中 -->
<div class="parent3">
<div class="child6">
<div>1</div>
</div>
</div>
</body>
</html>