如何实现div嵌套居中？求助：将container div在body2 div中居中

你的代码里有两个关键问题导致居中失效：

• .body2里同时写了display: flex和display: block，CSS后声明的属性会覆盖前面的，所以justify-content: center完全没起作用
• .body2的左内边距设了490px，这个超大值会把内部元素强行往右推，直接破坏居中效果

修改后的CSS代码如下：

.body2{
    display: flex;
    justify-content: center;
    /* 删掉display:block，保留flex布局 */
    background-color: pink;
    /* 替换掉不合理的padding，改成对称值或者按需调整 */
    padding: 40px 100px;
    /* 如果需要垂直居中，加上下面两行 */
    align-items: center;
    min-height: 100vh;
} 

.container {
    display: flex;
    background-color: #1F2937;
    flex-wrap: wrap;
    text-align: center;
    padding: 2px;
}

修改说明：

1. 移除display: block，让flex布局生效，justify-content: center就能水平居中内部元素
2. 调整padding为对称值，避免偏移内部元素
3. 新增align-items: center和min-height: 100vh是为了实现垂直居中，如果只需要水平居中可以删掉这两行

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