How to center two square blocks in page? - html

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/

Answer 2

Try this Fiddle, aligned text vertically and horizontally in center of the 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 3

Try this 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;
}
Also see more about "display:flexbox"
https://developer.mozilla.org/en-US/docs/Web/CSS/display

Answer 4

Here's how I'd do it:
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%);
}
See the fiddle here: http://jsfiddle.net/bootsified/kf7Lbq24/

Answer 5

You can add negative margins to each of the divs you want to put exactly in the center. Note that for this the width and height should be in pixels.
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>