CSS：无法使用边距水平居中[重复]答案

【问题标题】：CSS: Cannot horizontally center by using margin [duplicate]CSS：无法使用边距水平居中[重复]
【发布时间】：2022-01-21 07:09:16
【问题描述】：

我尝试使用margin: 0 auto; 将 div 元素水平居中，但我不明白为什么这些项目总是出现在 HTML 页面的左侧。

body {
    background: #f06d06;
    font-size: 80%;
}

main {
     display: inline-block;
     background: white;
     line-height: 300px;
     height: 300px;
     margin: 20px auto;
     width: 300px;
     resize: vertical;
     overflow: auto;
     vertical-align: middle;
}

div {
        display: inline-block;
        vertical-align: middle;
        height: 100px;
        line-height: 100px;
        background-color: black;
        padding: 50px;
        margin: 0 auto;
}

p {
        display: inline-block;
        vertical-align: middle;
        color: white;
        margin: 0;
        line-height: 1.5;    
}

<body> 
    <main>
        <div>
            <p>center align</p>
        </div>
    </main>
</body>

谁能告诉我我做错了什么？

【问题讨论】：

将您的代码添加为 sn-p

标签： html css center-align

【解决方案1】：

将 text-align:center 设置为 main.

main{
display: inline-block;
background: white;
line-height: 300px;
height: 300px;
width: 300px;
resize: vertical;
overflow: auto;
vertical-align: middle;
text-align:center;
}

【讨论】：

感谢您的帮助，我已经尝试过了，它以某种方式工作。但我仍然有疑问：1）为什么使用margin：0，auto；这次不能居中 div 吗？ 2) 我希望整个块位于 HTML 页面的中心； 3) text-align 仅适用于文本元素？是的，在这种情况下它适用于 div 元素，但我有点困惑，因为正如我之前了解到的 text-align 仅适用于文本..也许我错了......

【解决方案2】：

试试这个，我更改了 div 显示属性

body {
    background: #f06d06;
    font-size: 80%;
}

main {
     display: inline-block;
     background: white;
     line-height: 300px;
     height: 300px;
     margin: 20px auto;
     width: 300px;
     resize: vertical;
     overflow: auto;
     vertical-align: middle;
}

div {
        display: block;
        vertical-align: middle;
        height: 100px;
        width: 100px;
        line-height: 100px;
        background-color: black;
        padding: 50px;
        margin: 0 auto;
}

p {
        display: inline-block;
        vertical-align: middle;
        color: white;
        margin: 0;
        line-height: 1.5;    
}

<body> 
    <main>
        <div>
            <p>center align</p>
        </div>
    </main>
</body>

【讨论】：

如果你需要将整个 div 对齐到中心试试 flexbox

【解决方案3】：

body {
    background: #f06d06;
    font-size: 80%;
}

main {
     display: block;
     background: white;
     line-height: 300px;
     height: 300px;
     margin: 20px auto;
     width: 300px;
     resize: vertical;
     overflow: auto;
     vertical-align: middle;
}

div {
        display: block;
        vertical-align: middle;
        height: 100px;
        width: 100px;
        line-height: 100px;
        background-color: black;
        padding: 50px;
        margin: 0 auto;
}

p {
        display: block;
        vertical-align: middle;
        color: white;
        margin: 0;
        line-height: 1.5;    
}

<body>
  <main>
    <div>
      <p>Center div</p>
    </div>
  </main>
</body>

好的，让我解释一下这里发生了什么，你在你的帖子中添加了我改为块的显示内联块，这意味着一个特定的元素main将占据整个水平空间，当你使用margin: auto 它会自动为两边提供相等的边距，它正在处理您的代码，但问题是您尚未将宽度指定为最大。

因此，每当您想使用margin: auto 使元素居中时，您需要将宽度指定为100vh 或100%（如果父div 有100vh）

【讨论】：

不知何故我理解你的逻辑，块占据了整个水平空间。但是，developer.mozilla.org/en-US/docs/Web/CSS/vertical-align，告诉我垂直对齐仅用于内联、内联块、表格单元......

【解决方案4】：

你必须实现一个 flexbox 或 Grid 来实现垂直和水平居中！在这里我对你的代码稍作更新

body {
    background: #f06d06;
    font-size: 80%;
}

main {
     display: block;
     background: white;
     line-height: 300px;
     height: 300px;
     margin: 20px auto;
     width: 300px;
     resize: vertical;
     overflow: auto;
     vertical-align: middle;
     margin:auto;
     overflow:hidden;
}

div {
        display: inline-block;
        vertical-align: middle;
        height: 100px;
        line-height: 100px;
        background-color: black;
        margin: 0 auto;
        text-align:center;
        width:100%;
}

p {
        display: inline-block;
        vertical-align: middle;
        color: white;
        margin: 0;
        line-height: 1.5;    
        text-align:center;
}

<body> 
    <main>
        <div>
            <p>center align</p>
        </div>
    </main>
</body>

【讨论】：