一、使用Flexbox实现垂直居中
Flexbox是CSS3中的一种布局模式，它可以轻松实现元素的水平居中和垂直居中。使用Flexbox实现垂直居中有多种方式：
1. 在父元素上设置display:flex和align-items:center，这样子元素即可垂直居中。
.parent {
display: flex;
align-items: center;
}
2. 在父元素上设置display:flex和justify-content:center，然后在子元素上设置align-self:center，这样子元素即可垂直居中。
.parent {
display: flex;
justify-content: center;
}
.child {
align-self: center;
}
3. 在父元素和子元素上都设置display:flex，并在父元素上设置align-items:center，子元素上设置margin:auto，这样子元素即可垂直居中。
.parent {
display: flex;
align-items: center;
}
.child {
display: flex;
margin: auto;
}
二、使用table-cell实现垂直居中
使用CSS的table-cell属性可以实现垂直居中，这种方式比较常用于表格布局。
1. 将父元素设置为display:table，子元素设置为display:table-cell和vertical-align:middle，这样子元素即可垂直居中。
.parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}
三、使用transform实现垂直居中
使用CSS的transform属性可以实现垂直居中，这种方式比较巧妙。
1. 将父元素设置position:relative，子元素设置position:absolute和top:50%，然后使用transform:translateY(-50%)来实现垂直居中。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
四、使用line-height实现垂直居中
使用CSS的line-height属性可以实现文字的垂直居中。
1. 将父元素的line-height属性设置为和父元素高度相同，然后在子元素上设置vertical-align:middle，这样子元素的文字即可垂直居中。
.parent {
height: 100px;
line-height: 100px;
}
.child {
vertical-align: middle;
}
五、总结
以上几种方法都可以实现垂直居中，具体使用哪种方式要根据实际情况而定。使用Flexbox和table-cell的方式兼容性较好，使用transform和line-height的方式需要注意浏览器兼容性。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/236331.html
微信扫一扫 
支付宝扫一扫 