How to center two square blocks in page?

Question

I have a page where I'm displaying the status of two websites -- as in if they're currently up and running, or not. If the site is up, I want the block to have a light green background, and if not, a light red one. And the site's name should be centered inside the block.

This is what I've tried so far:

    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>

It works (see full screen output), but I feel like I'm way off. How do I do something simple as this using CSS, the correct way? I feel like my code is a hack. And how would you write the text exactly in the center of the block, vertically and horizontally?

And is it possible to have it such a way that it works across all desktop screen sizes? Maybe I should specify width and height in percentage as opposed to pixels?

Answer 1

You can use 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/