水平垂直居中的问题在前端应用上经常可以遇到，网上也可以搜索到很多方法，我这里记录下只是方便自己以后查询，或者回复。
第一种：我用的最溜的一种。position定位的方法
<style>
.parent{
width:200px;
height:200px;
position:relative;
background:red;
}
.child{
width:50px;
height:50px;
position:absolute;
top:50%;
left:50%;
background:powderblue;
margin-top:-12.5%; //这一块可能会有人不理解，定位了一半为什么还需要设置margin，是因为定位完了之后
margin-left:-12.5%; //是整个移动了一半，而想要它居中必须自己回移本身大小的一半。这里的margin是相对父级元素
}
</style>
<body>
<div class="parent">
<div class="child">居中了真厉害</div>
</div>
</body>
第二种：其实就是第一种的margin换成了css3中的新的属性teanslate
.parent{
width:200px;
height:200px;
position:relative;
background:red;
}
.child{
width:50px;
height:50px;
position:absolute;
top:50%;
left:50%;
background:powderblue;
transform: translate(-50%,-50%); //这里相对的是子元素的大小
}
</style>
<body>
<div class="parent">
<div class="child">居中了真厉害</div>
</div>
</body>
</html>
第三种:flex布局居中，利用父盒子规定元素位置
<style>
.parent{
background:red;
width:200px;
height:200px;
display:flex;
justify-content:center; //使得子项目水平居中
align-items:center; //使得子项目垂直居中
}
.child{
background:blue;
width:50px;
height:50px;
}
</style>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
第四种是table-cell布局，利用了表格
<style>
.parent{
width:200px;
height:200px;
background:red;
display:table-cell;
text-align:center; //使子元素水平居中
vertical-align:middle; //使子元素垂直居中
}
.child{
background:gold;
display:inline-block;
width:50px;
height:50px;
}
</style>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
