边距：0 自动；不在父级中将 div 居中答案

【问题标题】：margin: 0 auto; not centering div in parent边距：0 自动；不在父级中将 div 居中
【发布时间】：2019-11-06 23:23:22
【问题描述】：

我有下面的 div 排列，下面的 css。网上到处都说你需要 margin:0 auto;居中，但文字仍会转到右上角，

任何帮助表示赞赏。

.menu_item {
  margin: 0 auto;
}

<div style='position:absolute;width:110%;height:110%;left:-5%;top:-5%;background-color:white;z-index:7;overflow:none;'>
  <div id='menu_but' style='width:36px;height:36px;'>
    <div class='menu_line' />
    <div class='menu_line' />
    <div class='menu_line' />
  </div>
  <div id='menu'>
    <div class='menu_item'>HOME</div>
    <div class='menu_item'>ABOUT US</div>
    <div class='menu_item'>CONTACT US</div>
    <div class='menu_item'>PORTFOLIO</div>
  </div>
</div>

【问题讨论】：

您将 width:36px 设置为它们的父级，因此它在该宽度内居中
您有一些明显的 HTML 问题。你不能自行关闭一个 div <div class='menu_line' /> 那是无效的
@TemaniAfif 菜单项不是 menu_but 元素的子项。
@disinfor 他们是因为 HTML 无效
嗯，是的，但我认为指出来会更好:)

标签： html css

【解决方案1】：

首先，<div> 不是自闭合标签，所以你必须写 </div> 而不是 <div class='menu_line'/>

然后，您可以简单地执行以下操作：

<style>
.menu_item{
    display: inline-block;
}
#menu {
    position: relative;
    text-align: center;
}
</style>

<div id="menu">
    <div class="menu_item">HOME</div>
    <div class="menu_item">ABOUT US</div>
    <div class="menu_item">CONTACT US</div>
    <div class="menu_item">PORTFOLIO</div>
</div>

【讨论】：

display: inline-block 只能水平工作，有没有办法在纯 css 中垂直居中？
您没有指定需要水平和垂直居中...使用 flexbox：css-tricks.com/snippets/css/a-guide-to-flexbox

【解决方案2】：

也许使用 flexbox ？

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

所有子元素都将居中

【讨论】：