css水平居中很容易实现，如果是行内元素，直接使用text-align:center,如果是块元素，则可以marin-left:auto;margin-right:auto;来实现。
垂直居中是前端开发中极其常见的需求，理论上很简单，实践起来却有难度。常用的有以下几种方法：
html格式：
<div class="out-box">
<div class="inner-box">
<p>inner text</p>
<h5>inner title</h5>
</div>
</div>
1.基于绝对定位的方案
.out-box{ width: 200px; height: 200px; background: yellow; margin: 50px auto; position: relative; } .inner-box{ width: 80px; height: 100px; background: blue; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
color:#fff;
text-align:center;
}
效果如图：
2.基于flexbox的解决方案
.out-box{ width: 200px; height: 200px; background: yellow; margin: 50px auto; display: flex; } .inner-box{ background: blue; margin: auto; color: #fff; text-align: center; }
效果如图所示：
