如何创建中心容器

Question

我想知道如何在html或bootstrap中创建一个中心容器，在页面上运行常量，就像facebook一样。

Answer 1

要使元素成为窗口的整个高度，您必须将其高度及其所有祖先的高度设置为100％（包括html和body）。

要使元素水平居中，请应用margin: 0 auto;

html, body, .main {
  height: 100%;
  margin: 0;
}
.main {
  width: 400px;
  margin: 0 auto;
  background: rgb(200,225,250);
}

<div class="main">Hello foo bar world!</div>

或者，您可以使用display: inline-block和text-align: center

html, body, .main {
  height: 100%;
  margin: 0;
}
body {
  text-align: center;
}
.main {
  display: inline-block;
  text-align: left;
  width: 400px;
  background: rgb(200,225,250);
}

<div class="main">Hello foo bar world!</div>

Answer 2

Bootstrap的.container课就是这么做的。阅读文档！