文章目录
CSS水平垂直居中
今天读书的时候,愕然发现自己居然没有总结过水平垂直居中的方法,在印象中,这个知识点确实是很神奇的存在:
- 极其常见的需求
- 从理论上来看,它似乎极其简单
- 在实践中,它往往难如登天,当涉及尺寸不固定的元素时尤其如此
接下来我们就来总结一下该如何实现这个看似简单,实现起来却很难,但实现方法超级多的需求吧。
水平居中
行内元素(text-align)
行内元素只需要在父元素设置水平居中就可以达到目的,也包含了img
、 inline
或者inline-block
、inline-table
和inline-flex
等元素。
.container{
text-align:center;
}
块状元素(margin)
.center{
margin: 0 auto;
}
多个块状元素
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
方案一:
.container{
font-size: 0; //解决多个行内元素之间的间隙
text-align: center;
}
.item