css中常见的三种垂直居中的方法

2019-02-01 10:42 Html+Css 91 梁俊威

在进行前端开发的时候,我们经常会使用css对某一个div进行垂直居中,这是非常常见的布局方式了~

今天小编在这篇文章中给大家分享三种垂直居中布局的方法,无非也就那几个:table-cell + vertical-align、flex + align-items、 absolute + transform。


一、table-cell + vertical-align

这种方法的兼容性比较好(Tips:如果你的浏览器是IE8及以下版本,需要调整为table页面结构)

<div class="parent">
    <div class="child">Demo</div>
</div>
<style type="text/css">
.parent {
    display: table-cell;
    vertical-align: middle;
}
</style>


二、flex + align-items

这种方法存在兼容性问题。

<div class="parent">
    <div class="child">Demo</div>
</div>
<style type="text/css">
.parent {
    display: flex;
    align-items: center;
}
</style>


三、absolute + transform

 1.绝对定位脱离文档流,不会对后续元素的布局造成影响。但如果绝对定位元素是唯一的元素则父元素也会失去高度。

2.transform为 CSS3 属性,有兼容性问题

3.同水平居中,这也可以用margin-top实现,原理水平居中

<div class="parent">
    <div class="child">Demo</div>
</div>
<style type="text/css">
.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
</style>


若无特殊说明,本站点所有内容均为原创,转载请说明出处!

原文链接:https://www.codelearn.cn/read/134.html 点击复制