为何margin: auto !important无法居中div？求纯CSS居中方案

嘿，我懂你遇到的问题了！margin: auto没生效不是优先级的问题（所以加!important也没用），核心原因是块级元素默认宽度是100%，占满了父容器的可用空间，这时候左右没有多余空间让margin: auto分配，自然不会居中。而<center>标签之所以能生效，是因为它会给内部元素设置text-align: center，同时让块级元素也跟着居中，但这个标签已经是HTML4的遗留标签了，确实不推荐用，下面给你几种纯CSS的靠谱方案：

方案1：给div设置宽度 + margin: auto #

这是最经典的方法，适合你希望div有固定或百分比宽度的场景：
只需要给你的div加上width属性，margin: auto就能正常工作了。比如你可以设置固定宽度，或者根据需求用百分比：

<div style="width: 80%; margin: auto;">
  <h1 style="color: yellow">Do you want to build a snowman?</h1>
  <div class="head"></div>
  <div class="eye1"></div>
  <div class="eye2"></div>
  <div class="nose"></div>
  <div class="mouth"></div>
  <div class="smile"></div>
  <div class="body"></div>
  <h2 style="color: yellow">yes?</h2>
</div>

方案2：让div宽度由内容决定 + margin: auto #

如果不想固定宽度，希望div的宽度由内部内容撑开，可以用display: table（table元素的宽度默认由内容决定，且支持margin: auto）：

<div style="display: table; margin: auto;">
  <!-- 内部内容不变 -->
</div>

方案3：用Flexbox布局（现代推荐） #

如果你的项目兼容现代浏览器，Flexbox是更灵活的方案。可以给父容器（比如<body>）设置Flex属性，让子元素居中：

首先在样式里添加：

body {
  display: flex;
  justify-content: center;
}

然后你的div不需要额外的margin: auto，就能自动居中了，而且不管div宽度是多少都能生效。

总结一下，margin: auto生效的前提是元素有明确的宽度（或者不是100%占满父容器），这样左右才有空间分配外边距。之前没生效就是因为div默认占满了宽度，加!important解决不了这个逻辑问题~

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