HTML按钮居中问题求助：无法实现按钮居中显示

你的代码里已经用了display: flex，但缺少让flex子元素水平居中的关键属性，同时text-align: center对flex容器的直接子元素（form标签）不起作用——因为form默认是块级元素，这个属性无法影响它的水平位置。

修正后的CSS #

.buttonHolder {
    display: flex;
    justify-content: center; /* 关键：让flex子元素整体水平居中 */
    gap: 10px; /* 可选：给按钮之间添加间距，优化视觉效果 */
}

/* 可选：清除form标签的默认外边距，避免不必要的空隙 */
.buttonHolder form {
    margin: 0;
}

对应的HTML（无需修改） #

<div class="buttonHolder">
    <form action="#sweater">
        <input type="submit" value="Sweater" />
    </form>
    <form action="#pants">
        <input type="submit" value="Pants" />
    </form>
    <form action="#shirt">
        <input type="submit" value="Shirt" />
    </form>
    <form action="#suit">
        <input type="submit" value="Suit" />
    </form>
</div>

原理说明 #

• justify-content: center 是flex布局中控制子元素水平对齐的核心属性，设置后所有flex子元素会在容器的水平中心位置排列。
• gap 属性用于控制flex子元素之间的间距，避免按钮紧贴在一起。
• 清除form的默认外边距是为了消除浏览器自带样式带来的布局偏差，保证效果符合预期。

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