保证金自动不适用于表格单元格

Question

首先，我读了Margin 0 auto not work in div with display:table cell这个问题，但我无法使其发挥作用。我希望水平居中我的div，但它不适用于table-cell。

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。