CSS 实现块级元素垂直居中

最新推荐文章于 2024-03-06 09:03:31 发布

原创最新推荐文章于 2024-03-06 09:03:31 发布 · 2.6k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#垂直居中 #块级元素居中 #前端

javascript 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了三种实现块级元素垂直居中的方法：绝对定位、2D转换和弹性盒子布局。绝对定位适用于已知尺寸的情况；2D转换适用于高度不确定的元素；而弹性盒子布局则提供了一种更为简洁灵活的解决方案。

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

如果是文本，我们可以使用 line-height 将其垂直居中。但如果是块级元素，就不能这么做了。尽管如此，我们还是有很多方法可以将一个块级元素垂直居中。

绝对定位
2D 转换
弹性盒子布局

居中demo

绝对定位

如果块级元素高度和宽度已知，利用绝对定位和负边距，就可以实现垂直居中。

<div class="container">
    <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae illum libero officiis, ratione culpa, doloribus in omnis perspiciatis. Perspiciatis aliquam et ea deleniti, accusamus quas esse alias nemo ad. Adipisci.
    </div>
</div>

.container {
    position: relative;
    width: 500px;
    height: 500px;
    margin: 0 auto;
    border: 1px solid #000;
}
.content {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 300px;
    height: 200px;
    margin-left: -150px;
    margin-top: -100px;
    border: 1px solid #ccc;
}

2D 转换

那如果高度未知呢？要知道可是有很多情况，需要居中的元素其高度是不定的，它根据其内容撑开。这个时候我们可以使用 CSS3 的 transform 属性（html 代码如上不变）。

.container {
    position: relative;
    width: 500px;
    height: 500px;
    margin: 0 auto;
    border: 1px solid #000;
}
.content {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 300px;
    margin-left: -150px;
    border: 1px solid #ccc;
    transform: translateY(-50%);
}

弹性盒子布局

前面两种方式都使用了绝对定位，有时候可能会有一些副作用。其实我们还有更简单的方式，来实现块级元素垂直居中，那就是 Flex 布局。

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 500px;
    height: 500px;
    margin: 0 auto;
    border: 1px solid #000;
}
.content {
    width: 300px;
    margin: 0 auto; /*这里也可以使用 Flex 布局进行水平居中*/
    border: 1px solid #ccc;
}