如何实现一行内多个盒子居中显示且每行最多3个？

我需要让页面中的方块满足以下要求：

• 盒子之间保留边距
• 一行最多显示3个
• 整体在屏幕中居中

试过display、position、align-items、align-content等属性，调整margin也没用，始终无法实现预期的居中效果。

原代码 #

HTML #

<div> <!-- Cadet Info Animation -->
    <div class='cadetsAnimation'>
        <div class='cadetBox'>
            <div class='cadetNameBox'>
                <p class='cadetName'>Battalion Commander Lieutenant Colonel</p>
            </div>
        </div>
        <div class='cadetBox'>
            <div class='cadetNameBox'>
                <p class='cadetName'>Battalion XO Major</p>
            </div>
        </div>
        <div class='cadetBox'>
            <div class='cadetNameBox'>
                <p class='cadetName'>Battalion NCO Command Sergeant Major</p>
            </div>
        </div>
        <div class='cadetBox'>
            <div class='cadetNameBox'>
                <p class='cadetName'>Battalion S1 Captain</p>
            </div>
        </div>
        <div class='cadetBox'>
            <div class='cadetNameBox'>
                <p class='cadetName'>Battalion S2 Captain</p>
            </div>
        </div>
        <div class='cadetBox'>
            <div class='cadetNameBox'>
                <p class='cadetName'>Battalion S3 Captain</p>
            </div>
        </div>
        <div class='cadetBox'>
            <div class='cadetNameBox'>
                <p class='cadetName'>Battalion S4 Captain</p>
            </div>
        </div>
        <div class='cadetBox'>
            <div class='cadetNameBox'>
                <p class='cadetName'>Battalion S5 Captain</p>
            </div>
        </div>
        <div class='cadetBox'>
            <div class='cadetNameBox'>
                <p class='cadetName'>Battalion S6 Captain</p>
            </div>
        </div>
    </div>
</div>

CSS #

.cadetsAnimation {
    position: relative;
    margin: 50px;
    left: 50%;
    transform: translate(-50%, 0%);
}

.cadetBox {
    position: relative;
    display: inline-block;
    width: 400px;
    height: 400px;
    margin: 5px;
    background-color: #2148a8;
    transition: 1s;
    z-index: 1;
}

.cadetNameBox {
    position: absolute;
    width: 100%;
    height: 50px;
    top: 350px;
    left: 50%;
    transform: translate(-50%, 0%);
    background-color: #0e0e0e;
    opacity: 90%;
    z-index: 2;
}

.cadetName {
    position: relative;
    display: inline-block;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Montserrat', sans-serif;
    font-size: 20rem;
    color: #ffffff;
    z-index: 3;
}

解决方案 #

修改后的CSS #

.cadetsAnimation {
    margin: 50px auto; /* 水平居中，上下保留margin */
    display: flex;
    flex-wrap: wrap; /* 超出一行自动换行 */
    justify-content: center; /* 每行元素水平居中 */
    gap: 10px; /* 统一控制盒子间距，替代margin更稳定 */
    max-width: calc(400px * 3 + 10px * 2); /* 限制宽度，刚好放下3个盒子+间距 */
}

.cadetBox {
    position: relative;
    width: 400px;
    height: 400px;
    background-color: #2148a8;
    transition: 1s;
    z-index: 1;
}

.cadetNameBox {
    position: absolute;
    width: 100%;
    height: 50px;
    bottom: 0; /* 替代固定top值，适配盒子高度变化 */
    background-color: #0e0e0e;
    opacity: 0.9;
    z-index: 2;
}

.cadetName {
    text-align: center;
    line-height: 50px; /* 简单实现垂直居中 */
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem; /* 修正原超大字体问题 */
    color: #ffffff;
    margin: 0; /* 清除p标签默认margin */
}

问题原因说明 #

1. 原居中逻辑无效：父容器未设置宽度，默认占满100%屏幕，left:50% + transform的居中方式无法生效；且inline-block元素会受换行符影响产生额外空白间距，导致布局错位。
2. inline-block局限性：inline-block默认左对齐，难以精准控制每行元素数量和整体居中效果，边距叠加也会导致间距混乱。
3. 字体大小错误：.cadetName的font-size:20rem会让文字超大溢出，完全无法正常显示，这也是布局异常的隐藏原因。

方案优势 #

• Flexbox布局：flex-wrap:wrap自动换行，justify-content:center保证每行元素居中，gap统一控制间距，避免边距叠加问题。
• 宽度限制：max-width确保一行最多显示3个盒子，超出自动换行，符合需求。
• 简化布局：用line-height替代复杂的position+transform实现垂直居中，代码更简洁可靠。

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