css - 边距自动不适用于表格单元格

Question

首先我阅读了Margin 0 auto not work in div with display:table cell这个问题，但我无法让它发挥作用。我想将我的 div 水平居中，但它不适用于表格单元格。

http://jsfiddle.net/mLmHR/850/

html

<div id="wrapper">
  <div id="video">
  </div>
  <div id="info">
  </div>
</div>

CSS

#wrapper {
  height: 100vh;
  margin: auto;
  width: 70vw;
  border: 1px solid red;
  display: table-cell;
  vertical-align: bottom;

}

#video {
  border: 1px solid yellow;
  background-color:yellow;
  height: 100%;
}

#info {
  border: 1px solid green;
  background-color:green;
  height: 25%;
}

Answer 1

您可以在所有内容周围添加一个“包装器”/容器 div，并给它一个 display: table 和 margin: 0 auto。

像这样:

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

CSS:

#container {
  display: table;
  margin: 0 auto;
}

看看这个 JSFiddle .