from http://stackoverflow.com/a/34914335
Basically, you just need a two containers and make sure your elements meet the following criteria.
- should have display: table;
- should have display: table-cell;
- should have vertical-align: middle;
- should have text-align: center;
- should have 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;
}
<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
<img src="https://i.stack.imgur.com/mRsBv.png" />
</div>
</div>
</div>