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

相信大家很多时候将文字垂直居中时,都会用到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;

欢迎转载,原文地址:http://www.lrfun.com/html/technology/cssjs/2020/0604/139.html

上一篇:JS each遍历对象
下一篇:没有了