CSS垂直居中的几种方法

作者: tww844475003 分类: 前端开发 发布时间: 2021-06-23 22:40

1、通过 verticle-align:middle 实现 CSS 垂直居中

通过 vertical-align:middle 实现CSS垂直居中是比较使用的方法,但是有一点需要格外注意,vertical-align:middle 生效的需要元素为行内元素或者设置 display:inline-block 的块元素。

.parent {
    height: 100px;
    vertical-align: middle;
    border: solid 1px #333;
}
.child {
    display: inline-block;
}

2、通过 display:flex 实现 CSS 垂直居中

随着各在主流浏览厂商都逐步支持 flexbox 属性,通过“display:flex” 实现 CSS 居中的方案也越来越受青睐。

通过 display:flex 实现CSS垂直居中的方法只需父元素 display:flex; 子元素align-self:center。

.parent {
    height: 100px;
    display: flex;
    border: solid 1px #333;
}
.child {
    align-self:center
}

3、通过 display:table-cell 实现 CSS 垂直居中

父元素 display:table,子元素 display:table-cell 来方式实现CSS垂直居中。

.parent {
    height: 100px;
    display: table-cell;
    vertical-align: middle;
    border: solid 1px #333;
}

4、未知父元素高度通过 transform 实现 CSS 垂直居中

子元素设置 position: relative,通过 translateY 即可定位到垂直居中的位置。

.parent {
    height: 100px;
    border: solid 1px #333;
}
.child {
    height: 20px;
    position: relative;
    top: 50%;
    transform: translateY(-50%)
}

5、通过 line-height 实现 CSS 垂直居中

设置元素的 line-height 值等于父元素的 height,这种方法适用于子元素为单行文本的情况。

.parent {
    height: 100px;
    line-height: 100px;
    border: solid 1px #333;
}

6、通过 position: absolute 和 margin-top

.parent {
    height: 100px;
    position: relative;
    border: solid 1px #333;
}

.child {
    height: 20px;
    margin-top: -10px;
    position: absolute;
    top: 50%;
}
前端开发那点事
微信公众号搜索“前端开发那点事”

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注