实现水平垂直居中最便捷的方法

时间：2021-9-9 作者：smarteng 分类： WEB相关

实现水平垂直居中最便捷的方法

难点

核心点在于使用了 FFC/GFC 使 margin: auto 在垂直方向上居中元素。

原因如下，在 dispaly: flex 下：

Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.

CSS Flexible Box Layout Module Level 1 -- 8.1. Aligning with auto margins

简单翻译一下，大意是在 flex 格式化上下文中，设置了 margin: auto 的元素，在通过 justify-content 和 align-self 进行对齐之前，任何正处于空闲的空间都会分配到该方向的自动 margin 中去

这里，很重要的一点是，margin auto 的生效不仅是水平方向，垂直方向也会自动去分配这个剩余空间。

HTML：

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

SCSS：

.g-container {
    width: 100vw;
    height: 100vh;

    display: flex;
    // display: grid;
    // display: inline-flex;
    // display: inline-grid;

}

.g-box {
    width: 40vmin;
    height: 40vmin;
    background: #000;
    margin: auto;
}

效果如下：

标签: 水平居中

上一篇:cherry-Markdown测试JavaScript 下一篇:使用 Delve 调试远程 Go 应用