一、使用flexbox
可以使用Flexbox布局实现垂直居中。在父元素上设置display: flex，并设置align-items: center属性。这将使子元素垂直居中对齐。同时，可以利用justify-content: center属性来实现子元素水平居中对齐。
.parent {
display: flex;
align-items: center;
justify-content: center;
}
二、使用绝对定位
可以使用绝对定位来实现垂直居中。在父元素上设置样式position: relative属性，同时设置子元素的top、left、bottom、right属性都为0，再设置margin: auto实现子元素水平居中。
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
三、使用transform属性
可以使用transform属性来实现垂直居中。在父元素上设置position: relative属性，然后设置子元素的position: absolute和top: 50%属性，接着使用transform: translateY(-50%)属性实现子元素垂直居中对齐。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
四、结合line-height属性
可以结合line-height属性实现垂直居中。在父元素内部设置line-height属性，设置为父元素的高度，然后在子元素上设置属性display: inline-block和vertical-align: middle即可实现子元素垂直居中对齐。
.parent {
height: 200px;
line-height: 200px;
}
.child {
display: inline-block;
vertical-align: middle;
}
五、使用table布局
可以使用table布局来实现垂直居中。在父元素上设置display: table属性，然后再设置子元素为display: table-cell，并设置属性vertical-align: middle即可实现子元素垂直居中对齐。
.parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/231853.html
微信扫一扫 
支付宝扫一扫 