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

最终实现的效果：

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;
  }