如何将页面中的DIV元素居中并保持内部内容对齐

text-align: center 生效后内容错位的核心原因：这个属性只会让容器内的每一段行内内容单独居中，食材项的文字长度不一致时，每一行的居中基准不同，自然会出现复选框、文字没法对齐的问题。

正确实现逻辑是让食材容器本身居中，而不是让容器里的内容居中，这样既能保证整个模块在页面中间，内部内容还能保持默认的对齐规则，不会错位。

可直接复用的代码 #

HTML部分（无需修改原有结构） #

<div class="border">
    <div class="ingredients">
        <input type="checkbox" name="ingredients" id="sausage" value="sausage">
        <label for="sausage">1 pound sweet italian sausage</label>
    </div>
</div>

CSS部分 #

.ingredients{
    font-size: 14px;
    line-height: 30px;
    /* 让容器宽度刚好适配内部内容，不会默认撑满整行 */
    width: fit-content;
    /* 左右外边距自动计算，实现容器整体水平居中 */
    margin: 0 auto;
}

补充说明 #

• 如果需要兼容IE这类老旧浏览器，可以给父级.border添加text-align: center，再给.ingredients追加text-align: left做兜底，实现效果完全一致
• 后续往.ingredients里加更多食材复选框项时，模块会自动适配内容宽度，始终保持居中，内部所有项的复选框、文字都会保持左对齐，不会出现错位

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