项目中经常有需要块级元素垂直居中的情况,这里介绍几种常用的垂直居中方式;
下面是统一的html内容:
<div class="father">
<div class="son"></div>
</div>
方法一:弹性盒( flex )布局:
.father{
display:flex;
align-items:center;
}
这个方法是最简单的方法,只需要将父元素设置位弹性盒,并将它的侧轴设置为 center 就好了;适用于IE10及以上和其他的浏览器;
方法二:定位 + 移动:
.father{
position:relative;
}
.son{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
这个方法的原理是:子元素绝对定位,先将子元素定位到父元素的50%的位置,此时的子元素的上边界就在元素的中间,这时我们再将子元素向上移动自身高度的一半就可以居中了,如果知道子元素的宽高,这个transform可以替换成 margin-top: - 自身高度 / 2; 这个方法的兼容性比弹性盒好transform兼容 IE9及以上,如果使用的是 margin ,那么几乎兼容所有浏览器。
方法三:定位 + margin:auto :
.father{
position:relative;
}
.son{
position:absolute;
top:0;
bottom:0;
margin:auto;
}
这个方法的原理是:子元素绝对定位,将它的 top 值和 bottom 值同时设置为0,因为子元素比父元素矮(否则也不用居中了),所以子元素是不可能同时满足 top 值和 bottom 值为0的,这时再给子元素设置 margin:auto 就可以了居中显示了;这个方法兼容性也几乎兼容所有的浏览器。
注:这个兼容性是我查询的 Can I Use 网站获取的信息,如果有错误的地方,麻烦评论留言。