水平垂直居中的布局解决方案有很多，本文仅仅列出三种。
在浏览器里的显示效果：
第一种：利用flex来布局，也是最常用的方式：
.container{ ???width: 400px; ???height: 300px; ???background: blue; ???display: flex; ???justify-content: center; ???align-items: center;}.center{ ???width: 200px; ???height: ?100px; ???background: green;}第二种：绝对定位加CSS3的2D转换的方式。
.container{ ???width: 400px; ???height: 300px; ???background: blue; ???position: relative;}.center{ ???width: 200px; ???height: ?100px; ???background: green; ???position: absolute; ???left: 50%; ???top: 50%; ???transform: translate(-50%,-50%);}第三种：绝对定位并使四个方向上均为0加margin：auto；具体代码如下：
.container{ ???width: 400px; ???height: 300px; ???background: blue; ???position: relative;}.center{ ???width: 200px; ???height: ?100px; ???background: green; ???position: absolute; ???left: 0; ???right: 0; ???top: 0; ???bottom: 0; ???margin: auto;}以上三种方案的HTML部分：
<section class="container"> ???<div class="center"></div></section>
CSS水平垂直居中
原文地址：https://www.cnblogs.com/PeriHe/p/8278504.html