如何实现flexbox容器居中显示在屏幕正中间

以下是适配你现有代码的几种可直接落地的实现方案：

方案1：固定定位+偏移（无父元素依赖，最常用） #

你当前的.mybox代码仅需补充4行属性即可实现效果，修改后完整代码如下：

.mybox
{
    display: flex;
    width: 250px;
    height: 250px;
    background: white;
    /* 新增属性 */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

属性说明：

• position: fixed 让元素相对于浏览器视口定位，不受页面滚动、其他元素布局影响
• top: 50%、left: 50% 让元素的左上角对齐视口的中心位置
• transform: translate(-50%, -50%) 让元素向上、向左偏移自身宽高的一半，最终实现完全居中

方案2：父级flex布局（无定位属性，依赖父元素设置） #

如果不想使用固定定位，可以通过设置根元素的flex属性实现，首先添加全局样式：

html, body {
    height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f0f0f0; /* 测试用背景，避免白色盒子和默认白色页面融合，可删除 */
}

你原本的.mybox代码不需要做任何修改即可实现居中效果。

方案3：grid布局（代码最精简） #

如果不需要兼容过低版本浏览器，使用grid布局实现代码更短，全局样式如下：

html, body {
    height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
}

同样不需要修改你原有.mybox的代码即可生效。

内容的提问来源于stack exchange，提问作者cShaxu