CSS：你不知道的垂直居中写法

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第13天。

最终实现的效果： ![在这里插入图片描述](img-blog.csdnimg.cn/dc67eb75798…

1. 绝对定位 + calc

原理：把元素的正中心放置在视口的正中心

固定宽度

<main>
    <h1>标题</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, pariatur qui? Corporis, asperiores dicta. Cum eaque repellendus porro autem ratione libero non iure error pariatur, expedita consectetur illo, placeat facilis.</p>
</main>
<style>
main{
    position: absolute;
    top: calc(50% - 3em);
    left: calc(50% - 9em);
    width: 18em;
    height: 6em;
  }
</style>

不固定宽度

通常情况下，需要的居中的元素的宽高是由其内容决定的，如果我们能找到一个属性的百分比值以元素自身的宽高作为解析基准，那我们就可以实现不固定宽高的垂直居中。

答案是 CSS变形属性：translate。当我们在translate()变形函数中使用百分比值时，是以这个元素自身的宽度和高度为基准进行换算和移动的。

因此上述代码可以优化为：（这里只截取了关键的 css 样式代码。）

main{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

以上方法的缺点：

• 使用了绝对定位，对布局影响很大
• 如果居中的元素高度超过了视口，那么顶部会被裁切。
• 在某些浏览器中，可能会出现模糊的情况，因为元素可能被放置在半个像素上。这个问题可以用transform-style: preserve-3d来修复。

vh 基于视口居中

另一种方式就是使用 vh，代码如下：

main{
    width: 18em;
    padding: 1em 1.5em;
    margin: 50vh auto 0;
    transform: translateY(-50%);
  }

万能居中，也是目前最常用的方式 flex

这种好处是可以将内部的匿名元素（即没有被标签包裹的文本节点）垂直居中。

main{
    width: 18em;
    height:10em;
    display:flex;
    aign-items: center;
    justify-content: center;
  }

还有一种方式：

body{
 display: flex;
 min-height: 100vh;
 margin:0;
}

main{
 margin:auto;
}

这时，margin：auto不仅在水平方向上将元素居中，垂直也同样居中。最重要的是我们不需要指定宽度，此时被匹配的宽度为 max-content。此时即使是浏览器不支持 flex（目前这种可能性不大），页面渲染的结果也是可以接受的。

小技巧：任何元素只要设置了一个大于0的flex值，就将获得可伸缩的特性；flex的值负责控制多个可伸缩元素之间的尺寸分配比例。