[分享]css3垂直居中的方法汇总

CSS3垂直居中是前端开发中必不可少的一项技能。为了方便大家掌握，我们汇总了CSS3垂直居中的几种方法。1. 相对定位和绝对定位：.parent { : relative; } .child { : ...

CSS3垂直居中是前端开发中必不可少的一项技能。为了方便大家掌握，我们汇总了CSS3垂直居中的几种方法。

1. 相对定位和绝对定位：

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
} 

这种方法的原理就是通过相对定位将父元素和子元素的位置关系建立起来，同时使用绝对定位将子元素垂直居中。

2. Flex布局：

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
} 

Flex布局是一种比较新的布局方式，强大且方便，可以轻松实现水平和垂直居中。

3. line-height方法：

.parent {
    height: 200px;
    line-height: 200px; 
}

.child {
    display: inline-block;
    vertical-align: middle; 
} 

line-height方法的原理是通过将父元素的高度和行高设置为相同的值，然后将子元素使用inline-block属性，并设置vertical-align属性为middle实现垂直居中。

4. Grid布局：

.parent {
    display: grid;
}

.child {
    align-self: center;
    justify-self: center;
} 

与Flex布局类似，Grid布局也可以使用align-self和justify-self属性实现子元素的居中显示。

以上就是四种实现CSS3垂直居中的方法，大家可以根据自己的需求和习惯选择适合自己的方法行就行。