CSS grid; Place content in center - html

Question

I found a snippet to make a grid of boxes in CSS. It all looks great, but I can't seem to figure out two things.
1) How can I control the height of the boxes? When trying to set height: 100px;, it'll be ignored.
2) How can I make sure that the content of the boxes are placed in the middle of the box? I've tried everything, but with no luck at all... I'm thinking about horizontally and vertically middle of the box...
This is the HTML;
<div id="wrapper">
<div id="wrap">
<div class="box">
<div class="innerContent">
This is the content.
</div>
</div>
<div class="box">
<div class="innerContent">
This is the content.
</div>
</div>
<div class="box">
<div class="innerContent">
This is the content.
</div>
</div>
<div class="box">
<div class="innerContent">
This is the content.
</div>
</div>
<div class="box">
<div class="innerContent">
This is the content.
</div>
</div>
<div class="box">
<div class="innerContent">
This is the content.
</div>
</div>
<div class="box">
<div class="innerContent">
This is the content.
</div>
</div>
<div class="box">
<div class="innerContent">
This is the content.
</div>
</div>
</div>
</div>
This is the CSS;
#wrapper {
width: 60%;
margin: auto;
}
#wrap {
overflow: hidden;
}
.box {
width: 25%;
padding-bottom: 25%;
color: #CC0000;
position: relative;
float: left;
-moz-border-radius: 10px;
border-radius: 10px; /* standards-compliant: (IE) */
}
.innerContent {
position: absolute;
left: 5px;
right: 5px;
top: 5px;
bottom: 5px;
background: #FFFFFF;
padding: 10px;
-moz-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px; /* standards-compliant: (IE) */
}
.innerContent:hover {
background: #999999;
}

Answer 1

Is this what you're looking for: https://jsfiddle.net/76mywz8j/
Depending on your target browsers, you may be able to use
display: flex;
align-items: center;
Also, you may want to consider taking position: absolute off of .innerContent{}.
I also moved the background color from .innerContent{} to .box{} (and the hover state is now defined on .box rather than .innerContent{} ). That allows you to style box however you want to; by "thinning down" the styles defined on .innerContent{} , it becomes easier to position relative to its container.
Some other suggestions: use shorthand for border-radius. And you don't need border-radius defined on both .box{} and .innerContent{}.

Answer 2

If you want variable height try it.
#wrapper {
width: 100%;
margin: auto;
}
#wrap {
overflow: hidden;
}
.box {
width: 25%;
color: #CC0000;
float: left;
-moz-border-radius: 10px;
border-radius: 10px; /* standards-compliant: (IE) */
margin:auto;
text-align:center;
}
.innerContent {
background: #FFFFFF;
padding: 10px;
-moz-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px; /* standards-compliant: (IE) */
padding:40px 0px;
}
.innerContent:hover {
background: #999999;
}
<div id="wrapper">
<div id="wrap">
<div class="box">
<div class="innerContent">
This is the content.
</div>
</div>
<div class="box">
<div class="innerContent">
This is the content.
</div>
</div>
<div class="box">
<div class="innerContent">
This is the content.
</div>
</div>
<div class="box">
<div class="innerContent">
This is the content.
</div>
</div>
<div class="box">
<div class="innerContent">
This is the content.
</div>
</div>
<div class="box">
<div class="innerContent">
This is the content.
</div>
</div>
<div class="box">
<div class="innerContent">
This is the content.
</div>
</div>
<div class="box">
<div class="innerContent">
This is the content.
</div>
</div>
</div>
</div>