Positioning vertical center - html

Question

I want to center these 4 images. Horizontally it is working but vertically it won't work. Does anybody knows how to solve this problem? At the moment I've got a black header/footer section with 4 images centered horizontally. Everything is scalable but not the height of the images.
Am doing it right?
HTML:
<section>
<div class="pic">
<img src="img.png" alt="Pic" />
</div>
<div class="pic">
<img src="img.png" alt="Pic" />
</div>
<div class="pic">
<img src="img.png" alt="Pic" />
</div>
<div class="pic">
<img src="img.png" alt="Pic" />
</div>
</section>
CSS:
body {
margin:0;
padding:0;
max-width: 100%;
max-height:100%;
}
section {
position:absolute;
top:5%;
bottom:5%;
left:0;
width:100%;
height:90%;
}
section img {
width:12.5%;
float:left;
margin-left:10%;
}

Answer 1

Assuming the width of the image equals the height of the image (like the code you gave has), you can just use margin-top of 50% - imageHeight. That would look like
section img {
width:12.5%;
margin-top:32.5%;
float:left;
margin-left:10%;
}
Demo
If they're not, you can use this pure CSS approach

Answer 2

I think its easier to wrap the images in a container and then center the container in the container's parent, in this case you could use an Article tag to wrap the images an then center that article in the section like this
HTML
<section>
<article>
<div class="pic">
<img src="img.png" alt="Pic" />
</div>
<div class="pic">
<img src="img.png" alt="Pic" />
</div>
<div class="pic">
<img src="img.png" alt="Pic" />
</div>
<div class="pic">
<img src="img.png" alt="Pic" />
</div>
</article>
</section>
CSS
html, body {
height: 100%;
width: 100%;
}
section {
top: 5%;
left: 0%;
width: 100%;
height: 90%;
/* strech */
overflow: hidden;
}
article {
width:80%;
height:40%; /* change this to set height */
/* CSS absolute center begin */
border: 2px solid #0000ff;
margin: auto;
position: absolute;
display: inline-block;
top: 0;
bottom: 0;
left:0;
right:0;
/* CSS absolute center end*/
}
.pic {
position: relative;
float: left;
width: 12.5%;
height: 100%;
margin-left: 10%;
}
.pic img{
position: relative;
width:100%;
height:100%;
}
Hope it help you

Answer 3

You can give the section position:relative; and then do a trick with the images.
The sample below makes them centered of the section, if you want to have the images spread out, but vertically aligned, you need to do this trick on the containing element (like a dive around the images in the section:
section {
position:relative;
top:5%;
bottom:5%;
left:0;
width:100%;
height:90%;
}
section img {
/*width:12.5%;
float:left;
margin-left:10%;*/
position:absolute;
top:50%;
margin-top:-25%;/* should be half the height of the image */
left:50%;
margin-left:-25%;/* should be half the width of the image */
}