css垂直居中的8种方法 |css文字跟单选按钮对齐

第一种：利用line-height属性

.container {
height: 100px;
line-height: 100px;
}
.content {
display: inline-block;
vertical-align: middle;
}

第二种：利用flexbox布局

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

第三种：利用table-cell方法

.container {
display: table-cell;
vertical-align: middle;
}

第四种：使用absolute方法进行居中

.container {
position: relative;
}
.content {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

第五种：使用grid布局

.container {
display: grid;
place-items: center;
}

第六种：使用calc方法计算偏移量

.container {
position: relative;
}
.content {
position: absolute;
top: calc((100% - 100px) / 2);
}

第七种：使用translate方法

.container {
position: relative;
}
.content {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

第八种：使用伪元素:before方法

.container:before {
content:"";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.content {
display: inline-block;
vertical-align: middle;
}

以上8种CSS垂直居中方式都有各自的优势和适用场景，开发者可以根据具体需求灵活选择使用。