元素垂直居中的几种方法

最新推荐文章于 2022-12-12 18:13:57 发布

原创最新推荐文章于 2022-12-12 18:13:57 发布 · 255 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了几种使用CSS实现元素垂直居中的方法，包括使用display:table、absolute与transform配合、display:flex以及简单文本的垂直居中技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近整理了一下如何使元素垂直居中的方法。

1. 使用display:table来实现

通过使父级元素成为一个块状表格，使子元素设置成表格单元格，然后调整子元素的样式为垂直居中，可以让子元素相对于父元素垂直居中，但这里有个前提就是父元素的高度要已知。代码如下：
html：

<div style="height:600px;" class="middleParent">
    <span class="middleChild">对于元素的垂直居中我们有很多种实现方式。</span>
    <p class="middleChild"><strong>1、使用display:table来实现</strong></p>
</div>

css：

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

2. 使用absolute与transform配合实现

通过设置子元素的定位为absolute，子元素需要相对于父元素定位，所以将父元素的定位为relative，通过top:50%，将子元素的高度上移一半，也就是遮住一半，再通过transform: translateY(-50%)，将子元素的中间线（高度的中间线）移到父元素的中间线（父元素高度的中间线），这样就可以使得子元素相对于父元素垂直居中了。
代码如下：
html：

<div class="middleParent">
    <div class="middleChild">
        2、使用absolute与transform配合实现
    </div>
</div>

css：

.middleParent{
    position: relative;
    height: 600px;
    background-color: red;
}
.middleChild{
        position: absolute;
        top:50%;
        transform: translateY(-50%);
        height: 100px;
        background-color: yellow;
    }

这里注意，父元素的高度一定是已知的。如果想要水平居中也是同理。

3. 使用display:flex

Flexbox(伸缩盒)是CSS3中新增的特性，利用这个属性可以解决页面中的垂直居中问题。
代码如下：
html

<div class="middleParent">
    <div class="middleChild">
        3、使用display:flex
    </div>
</div>

css

.middleParent{
        display: flex;
        align-items: center;
        height: 600px;
        background-color: red;
    }
    .middleChild{
        background-color: yellow;
    }

通过设置父元素的display为flex以及align-items为center就可以让子元素相对于父元素垂直居中。

4.对于最简单的单行文本，让文本高度等于父元素的高度即可

html：

<div class="middleParent">
        <p class="textMiddle">3、文本垂直居中</p>
</div>

css：

.middleParent{
        height: 50px;
        background-color: red;
    }
    .textMiddle{
        line-height: 50px;
    }