2021-02-27

最快水平垂直居中一个元素的方法是什么？

方法一：flex 布局下的 margin: auto

<div class = "g-container">
    <div class = "g-Box"></div>
</div>

.g-container {
    display:flex;
}

.g-Box {
    margin:auto;
}

上面的 display: flex 替换成 display: inline-flex | grid | inline-grid 也是可以的。

在 display: flex 布局下， margin auto 的生效不仅是水平方向，垂直方向也会自动去分配这个剩余空间。

 

方法二：grid 布局下的 place-items: center

直接上代码：

.g-container {
    display: grid;
    place-items: center
}