设置margin-left/right:auto不生效？inline-block元素无法在固定宽父元素居中

嘿，我来帮你捋捋这个问题～你想在固定宽度290px的<form>里居中一组按钮，给包裹按钮的div设了display: inline-block让它宽度适配按钮，然后加了margin-left: auto; margin-right: auto，甚至给form加了display: block，但div就是不居中，对吧？

先看看你的代码：

HTML代码 #

<form id="schemeForm">
 <!--Other HTML elements-->
 <div id="formButtons">
 <input type="button" value="Back" />
 <input type="submit" value="Submit" />
 </div>
</form>

CSS代码 #

#schemeForm { width: 290px; display: block; }
#formButtons { display: inline-block; /*to make it only as wide as buttons*/ margin-left: auto; margin-right: auto; }

问题出在哪？ #

margin-left: auto; margin-right: auto这种居中方式，只对块级元素（block-level）生效。而你给#formButtons设置了display: inline-block，它属于「行内块元素」，这类元素的水平对齐逻辑是跟着父元素的text-align走的，不是靠自身的auto margin，所以你之前的设置自然没效果啦。

两种解决方法，任你选 #

方法一：借助父元素的text-align属性 #

直接给form加上text-align: center，里面的inline-block元素就会自动居中：

#schemeForm { 
  width: 290px; 
  display: block; 
  text-align: center; /* 关键添加项 */
}
#formButtons { 
  display: inline-block; 
  /* 这里可以删掉margin: auto了 */
}

如果form里还有其他需要左对齐的内容，只要给那些元素单独设置text-align: left就行，不会互相影响。

方法二：改成块级元素+width: fit-content #

如果你不想用text-align，也可以把div改成块级元素，然后用width: fit-content让它宽度自适应按钮，再用auto margin居中：

#schemeForm { 
  width: 290px; 
  display: block; 
}
#formButtons { 
  display: block; /* 切换为block */
  width: fit-content; /* 让宽度随内容变化 */
  margin-left: auto; 
  margin-right: auto; 
}

width: fit-content是CSS3的属性，现在主流浏览器都支持，完美实现“宽度只适配内部按钮”的需求。

验证示例（用方法一） #

<html>
<body>
<style>
#schemeForm { 
  width: 290px; 
  display: block; 
  background-color: black; 
  text-align: center;
}
#formButtons { 
  display: inline-block; 
  background-color: orange; 
}
</style>
<form id="schemeForm">
 <!--Other HTML elements-->
 <div id="formButtons">
 <input type="button" value="Back" />
 <input type="submit" value="Submit" />
 </div>
</form>
</body>
</html>

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