css 文字垂直居中

方法一：使用flex布局

<style>
    .container {
        display: flex;
        align-items: center;
        height: 100px;
    }
</style>
<div class="container">
    <span>要居中的文本</span>
</div>

方法二：使用定位和transform

可以通过将子元素设置为绝对定位，并使用transform属性将其向上移动50%并向左平移50%来实现垂直居中。

<style>
    .container {
        position: relative;
        height: 100px;
    }
 
    .text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>
<div class="container">
    <span class="text">要居中的文本</span>
</div>

方法三：使用表格布局

可以通过将父元素设置为表格布局，并使用vertical-align属性将子元素垂直居中。

<style>
    .container {
        display: table;
        height: 100px;
    }
 
    .text {
        display: table-cell;
        vertical-align: middle;
    }
</style>
<div class="container">
    <span class="text">要居中的文本</span>
</div>

 

来自baidu ai