如何解决HTML/CSS中Flexbox表单容器内标签无法居中问题

你的猜测方向是对的——input设置width:100%会让输入框占满.form的宽度，但这并非标签无法居中的直接原因。.formContainer的flex布局仅负责让整个表单容器在页面中居中，不会影响表单内部元素的对齐方式。当前label是inline-block类型，默认仅占据自身内容宽度，因此会自然左对齐。

以下是几种可行的解决方案：

方案1：让标签占满整行并居中文字 #

修改label的CSS样式，使其占满父容器宽度，同时设置文字居中：

label {
    display: inline-block;
    width: 100%;
    text-align: center;
}

方案2：将标签设为块级元素并居中文字 #

直接把label改为块级元素，再设置文字居中，效果和方案1一致：

label {
    display: block;
    text-align: center;
}

方案3：统一设置表单内部元素居中 #

如果希望表单内所有行内/行内块元素（包括标题、按钮）都居中，可以给.form添加text-align:center：

.form {
    margin-top: 5px;
    padding: 10px;
    border: 1px solid #d3d3d3;
    text-align: center;
}

修改后的完整代码示例 #

CSS

html, body {
    margin: 0;
    padding: 0;
}

.formContainer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.form {
    margin-top: 5px;
    padding: 10px;
    border: 1px solid #d3d3d3;
}

.formInput {
    display: block;
    margin: 25px 0px;
    border: none;
    width: 100%;
}

label {
    display: block;
    text-align: center;
}

HTML

<div class="formContainer">
    <form class="form" onsubmit="return false">
        <h1 class="formTitle">title</h1>
        <input required class="formInput" type="text" placeholder="a">
        <label for="b">b</label>
        <input required id="b" class="formInput" type="date">
        <label for="c">c</label>
        <select required id="c" class="formInput">
            <option selected disabled value="">Select an option</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button class="addBtn">Add</button>
    </form>
</div>

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