如何在页面中居中放置两个方块？

Question

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

这是我目前尝试过的方法：

    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。以及如何将文本准确地垂直和水平地写在块的中心？

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

Answer 1

试试这个 Fiddle，在 div 的中心垂直和水平对齐文本。

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

Answer 2

试试这个 jsfiddle

body {
      font-family: sans-serif;
    }
    #container {
      width: 100%;
      height: 400px;

      margin: 0 auto;
      border: 1px solid #ccc;
    position:relative;
    }
    #smallcontainer {
      width: 208px;
      height: 100px;
      position:absolute;
      left:50%;
      top:50%;
      margin-left:-100px;
      margin-top:-50px;
    }
    .status {
        height: 100px;
        width: 100px;
        background: #efefef;
        float: left;
        margin-left: 2px;
        border: 1px solid #ccc;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-box-pack: center;
        -webkit-box-align: center;

        display: -moz-box;
        -moz-box-orient: vertical;
        -moz-box-pack: center;
        -moz-box-align: center;

        display: box;
        box-orient: vertical;
        box-pack: center;
        box-align: center; 
        text-align:center;
    }

另请参阅有关 "display:flexbox" 的更多信息 https://developer.mozilla.org/en-US/docs/Web/CSS/display

Answer 3

这是我的做法：

HTML:

<div id="container">
    <div id="smallcontainer">
        <div class="status">
            <div class="border">
                <div class="txt">Text Here</div>
            </div>
        </div>
        <div class="status">
            <div class="border">
                <div class="txt">More Text Here</div>
            </div>
        </div>
    </div>
</div>

CSS:

* {
    box-sizing: border-box;
}
body {
    font-family: sans-serif;
}
#container {
    width: 95%;
    height: 400px;
    margin: 0 auto;
    border: 1px solid #ccc;
    position: relative;
}
#smallcontainer {
    width: 208px;
    height: 100px;
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.status {
    height: 100%;
    width: 50%;
    float: left;
    text-align: center;
    padding: 2px;
}
.border {
    background: #efefef;
    border: 1px solid #ccc;
    width: 100%;
    height: 100%;
    position: relative;
}
.txt {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

在此处查看 fiddle：http://jsfiddle.net/bootsified/kf7Lbq24/

Answer 4

您可以使用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/

Answer 5

您可以为每个要恰好放在中心的 div 添加负边距。请注意，为此宽度和高度应以像素为单位。

body {
  font-family: sans-serif;
}
#container {
  width: 800px;
  height: 600px;
  border: 1px solid #ccc;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -400px;
  margin-top: -300px;
}
#smallcontainer {
  width: 208px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -104px;
  margin-top: -50px;
}
.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>

如何在页面中居中放置两个方块？

How to center two square blocks in page?

html

css

styling