边距：自动；不适用于内联块元素

在 CSS 中，margin:auto;通常用于在页面上水平居中块元素。但是，当应用于内联块元素时，此属性变得无效。

内联块元素像内联元素一样流入页面内联，但可以具有特定的宽度和高度。当尝试使用 margin:auto 将它们水平居中时，此行为会产生困难；。

旧代码：

#container {
    /* Other styles... */
}
.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

在此代码中，#container 元素具有特定宽度并触发预期的居中行为。

新代码：

#container {
    /* Other styles... */
    display: inline-block;
}
.center {
    margin: 75px auto;
    position: relative;
}

将 #container 的显示属性更改为 inline-block 会更改它与边距的交互方式。内联块元素的行为与块元素不同，并且无法使用 margin:auto; 居中;。

解决方案：

使内联块元素居中水平方向，请在其包含元素上使用 text-align: center 属性：

.center {
    text-align: center;
}

这会将内联块元素与其包含块元素的中心对齐。