[分享]css元素垂直居中的三种方式

CSS是一种用于网页设计的强大语言。在HTML中，我们可以使用CSS样式来控制页面的外观和布局。而元素的垂直居中是一个常见的需求，下面我们将介绍三种实现方式。.firstway{ height: 20...

CSS是一种用于网页设计的强大语言。在HTML中，我们可以使用CSS样式来控制页面的外观和布局。而元素的垂直居中是一个常见的需求，下面我们将介绍三种实现方式。

.first-way{
    height: 200px; 
    line-height: 200px; 
    vertical-align: middle; 
    display: table-cell; 
} 

第一种方式是使用display: table-cell和vertical-align: middle，这是一种简单直接的垂直居中方式。我们将需要垂直居中的元素设置为table-cell，这样它就表现得像表格的一个单元格，并可以使用vertical-align属性来实现垂直居中。此外，还设置了height和line-height属性，保证元素的高度和行高相同，并且居中元素的文字也可以垂直居中。

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

第二种方式是使用position: absolute和transform: translateY(-50%)。我们可以将需要垂直居中的元素设置为绝对定位，再使用top:50%将其定位在父元素的中心位置，接着使用transform: translateY(-50%)把元素向上移动自身高度的一半，实现垂直居中。

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

第三种方式是使用Flexbox，只需在父元素上添加display:flex，再使用justify-content:center和align-items:center分别实现水平和垂直居中。

以上三种方式都可以实现元素的垂直居中，但是使用的方法略有不同，可以根据实际情况进行选择。