如何将div在父级div内居中对齐？按钮内容无法居中问题求助

问题根源 #

• 水平居中失效：#buttoncontents 设置了display: inline-block，margin: 0 auto的水平居中规则仅对块级元素生效，行内块元素的水平对齐由父元素的text-align属性控制。
• 垂直对齐异常：未设置垂直对齐规则，内容默认和父元素顶部对齐；同时#buttontext设置了line-height: 0，会导致文字行高异常，进一步加剧错位问题。

推荐方案（Flex布局，兼容性覆盖绝大多数现代场景） #

仅需修改#button的CSS即可同时实现水平+垂直居中，其余原有样式可保留：

#button {
  width: 300px;
  height: 60px;
  background: lightcoral;
  /* 新增3行flex相关规则 */
  display: flex;
  justify-content: center; /* 水平居中内部内容 */
  align-items: center; /* 垂直居中内部内容 */
}

如果需要保证内部文字和箭头图标完全对齐，新增以下规则即可：

#buttontext, #arrow {
  vertical-align: middle;
}

同时建议删除#buttontext的line-height: 0属性，避免文字显示异常。

老旧浏览器兼容方案 #

如果需要支持不支持Flex的低版本浏览器，可使用以下修改方式：

#button {
  width: 300px;
  height: 60px;
  background: lightcoral;
  text-align: center; /* 控制行内块子元素水平居中 */
  line-height: 60px; /* 行高等于父元素高度，实现行内内容垂直居中 */
}

#buttoncontents {
  display: inline-block;
  background: lightgreen;
  width: 200px;
  /* 移除原有的margin-left/right: auto规则，无需生效 */
}

#buttontext, #arrow {
  vertical-align: middle;
}

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