html - 如何在页面中居中放置两个方 block ？

Question

我有一个页面，其中显示了两个网站的状态——判断它们是否正在运行。如果该站点已启动，我希望该 block 具有浅绿色背景，如果没有，则为浅红色。站点名称应在 block 内居中。

这是我到目前为止尝试过的:

    body {
      font-family: sans-serif;
    }
    #container {
      width: 800px;
      height: 600px;
      margin: 0 auto;
      border: 1px solid #ccc;
    }
    #smallcontainer {
      width: 208px;
      height: 100px;
      margin: 200px auto auto;
    }
    .status {
      height: 100px;
      width: 100px;
      background: #efefef;
      float: left;
      margin-left: 2px;
      border: 1px solid #ccc;
    }

<div id="container">
  <div id="smallcontainer">
    <div class="status"></div>
    <div class="status"></div>
  </div>
</div>

它有效(参见 full screen output )，但我觉得我离题太远了。我如何使用 CSS 以正确的方式做一些简单的事情？我觉得我的代码是 hack。以及如何将文本准确地垂直和水平地写在 block 的中心？

是否有可能让它适用于所有桌面屏幕尺寸？也许我应该以百分比而不是像素来指定宽度和高度？

Answer 1

您可以使用 flexbox . <子> ^support

HTML

<div id="container">
    <div class="status"></div>
    <div class="status"></div>
</div>

CSS

#container {
    width: 800px;
    height: 600px;
    margin: 0 auto;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
}
.status {
    height: 100px;
    width: 100px;
    background: #efefef;
    margin-left: 2px;
    border: 1px solid #ccc;
}

http://jsfiddle.net/b9n3h1en/