Vertically and horizontally center image with line of text directly below

Question

I'm building a landing page for a client that has a logo in the center of the page with their catchphrase directly below.

They want the catchphrase to fade in on page load so I have to display it as a paragraph as opposed to including it in the image file.

How can I get the paragraph of text to responsively stay directly below the centered image?

Here is my html code:

<div class="viewport1">
<div class="center-wrapper">
<div class="image-wrapper">
<a href="home.html"><img src="images/landing_logo2.png" /></a>
<div id="test"><p>enter the sunshine state</p></div>
</div>
</div>
</div>

And my CSS:

<style>

div.viewport1 {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
width: 100%;
overflow: hidden;
z-index: -9999;
}

div.center-wrapper {
max-width: 100%;
height: 100%;
float: left;
position:relative;
left: 50%;
}

div.image-wrapper {
left: -50%;
position: relative;
max-width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}

img {
top: 50%;
left: 50%;
position: relative;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
max-height: 100%;
max-width: 100%;
vertical-align: middle;
display: inline-block;
}

*, *:before, *:after {
box-sizing: border-box; 
}

.image-wrapper p {
width: 100%;
padding-top: 200px;
margin-left: 10px;
font-family: segoe;
font-size: 21px;
text-align: center;
color: #fff;
-webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
   -moz-animation: fadein 5s; /* Firefox < 16 */
    -ms-animation: fadein 5s; /* Internet Explorer */
     -o-animation: fadein 5s; /* Opera < 12.1 */
        animation: fadein 5s;
  }

@keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

</style>

Answer 1

I understand that the logo is to be exactly centered and the text is to be below below that.

You seem to have a lot of unnecessary wrappers so I've simplfied this.

Position the image-wrapper absolutely at the center using the usual techniques *but then position the #test div absolutely as well but at the bottom of the parent div.

 div.image-wrapper { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px solid grey; } .image-wrapper img { display: block; } #test { position: absolute; top: 100%; width: 100%; border: 1px solid grey; border-top: none; } #test p { width: 100%; font-family: segoe; font-size: 21px; text-align: center; color: #000; } 

 <div class="image-wrapper"> <a href="home.html"> <img src="http://lorempixel.com/output/people-qc-250-250-3.jpg" /> </a> <div id="test"> <p>enter the sunshine state</p> </div> </div> 

JSFiddle Demo

Answer 2

Here is a simple example of how I would approach this.

This way, it is more backwards compatible and will have less issues, such as what happens when the container is smaller than the item being centered

 html, body { margin: 0; height: 100%; } .out { font-size: 0; text-align: center; height: 100%; } .out:before { content: " "; height: 100%; } .out:before, .in { display: inline-block; vertical-align: middle; } .in { font-size: 12pt; } 

 <div class="out"> <div class="in"> <img src="//placehold.it/200x100"> <div>This is a caption</div> </div> </div>