margin:auto在display:table-cell元素中无效的问题求助

嘿，这个问题我之前也踩过坑！原因很明确：display:table-cell元素的margin属性在CSS规范里是不被支持的，所以你设置margin:auto完全不会起作用。不过别担心，有两种靠谱的解决方案，看你更倾向哪种：

方案一：外层套display:table容器 #

既然table-cell依赖表格布局体系，那我们给它加一个外层的table容器，让这个容器来承担水平居中的任务：

修改后的HTML： #

<div id="table-container">
  <div id="wrapper">
    <div id="video"></div>
    <div id="info"></div>
  </div>
</div>

修改后的CSS： #

#table-container {
  display: table;
  margin: 0 auto; /* 这里实现水平居中 */
  height: 100vh; /* 把高度属性移到外层容器 */
}

#wrapper {
  display: table-cell;
  vertical-align: bottom; /* 保留你原本需要的垂直底部对齐 */
  width: 70vw;
  border: 1px solid red;
}

#video {
  border: 1px solid yellow;
  height: 100px; /* 给元素加个高度方便预览效果 */
}

#info {
  border: 1px solid blue;
  height: 50px;
}

这个方法完美保留了你原本想用表格布局实现垂直对齐的需求，同时顺利达成水平居中。

方案二：改用Flex布局（更现代简洁） #

如果你的项目不需要兼容特别老旧的浏览器，用flex布局会更省心，不需要额外嵌套容器：

CSS代码： #

#wrapper {
  height: 100vh;
  width: 70vw;
  border: 1px solid red;
  display: flex;
  flex-direction: column; /* 让子元素垂直排列 */
  justify-content: flex-end; /* 实现子元素靠底部对齐，替代vertical-align:bottom */
  margin: 0 auto; /* 这里margin:auto就能正常生效啦！ */
}

#video {
  border: 1px solid yellow;
  height: 100px;
}

#info {
  border: 1px solid blue;
  height: 50px;
}

Flex布局现在已经是前端布局的主流方案，灵活性更高，后续调整布局也更方便。

你可以根据自己的项目需求选其中一种，两种方法都能完美解决你的问题~

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