center h and v

by karlgo

HTML

<div class="wrapper">
    <div class="absoluteCenterWrapper">
        <img src="http://goo.gl/QrKCc" class="absoluteCenter">
        <p>Paragraph goes here.</p>
    </div>
</div>

CSS

.wrapper {
    text-align: center;
}

.absoluteCenterWrapper {
 position:relative; /* Contains the image in the div */
 border: 1px solid blue;
 height: 150px;
 
}

/* Positioning */
.absoluteCenter {
 margin:auto; /* Required */
 position:absolute; /* Required */
 top:0;bottom:0; /* Aligns Vertically */
 
}

/* Sizing - resizes down to avoid cutting off */
.absoluteCenter { /* Fallback Sizing */
 max-height:100%;
 max-width:100%;
}