I have the following code which sets up a container which has a height that changes with the width when the browser is re-sized (to maintain a square aspect ratio).
Here's a technique that allows you to center ANY content both vertically and horizontally!
Basically, you just need a two containers and make sure your elements meet the following criteria.
display: table;
display: table-cell;
vertical-align: middle;
text-align: center;
display: inline-block;
If you use this technique, just add your image (along with any other content you want to go with it) to the content box.
body {
margin : 0;
}
.outer-container {
position : absolute;
display: table;
width: 100%;
height: 100%;
background: #ccc;
}
.inner-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-content {
display: inline-block;
background: #fff;
padding : 12px;
border : 1px solid #000;
}
img {
max-width : 120px;
}
See also this Fiddle!