CSS div里的内容垂直居中和水平居中

发表时间： 2020-06-04 14:01:02 | 浏览次数：

相信大家很多时候将文字垂直居中时，都会用到line-height这个样式，如果我们div的高度是固定的，用line-height自然就很顺手，但如果遇到高度不是固定值时，这个样式就不太适用，特别是做手机站时，很多时候都需要自适应。

那么今天跟大家分享一个可以垂直居中的方法：

<style>
	.af{height:60px;background-color:#000;display:flex;align-items:center;justify-content:center;}
	.af_d{background-color:#fff;margin:0 6px;}
</style>
<div class="af">
	<div class="af_d">哈哈哈</div><br/>
	<div class="af_d">嘻嘻嘻</div>
</div>

垂直居中主要的样式为：display:flex;align-items:center;

用了垂直居中样式后，text-align:center水平居中样式在这里是不起效的，要水平居中需要用到：justify-content:center;