Vertically and horizontally centering text over an image - html

Question

I want to have a big image that has a width of 100% and a height of about 70% of the screen. On this image I want some text ontop of this image and this text needs to go right in the middle of the image. In a nutshell: how can I center horizontal and vertical this text in a 100% width image?:
<div id="top-area">
<img src="img/startphoto.jpg" alt="background image #1" />
<p>Some text</p>
</div>
#top-area img{
width: 100%;
position: absolute;
top: 0px;
left: 0px;
}
#top-area p{
position: relative;
text-align: center;
margin-top: 330px;
color: white;
font-family: 'Montserrat', sans-serif;
font-size: 3em;
}
I know I use margin-top to get the horizontal place of the text, but this feels like the wrong way. Anyone got beter suggestions?

Answer 1

You could assign position:absolute to the img and p element. You would then declare top:40%; on the p element to vertical centralise it. The reason I use 40% is due to the size of the text you're using. You could use 50% and then with javascript calculate the height of the text and assign a top negative margin to it. This is only required if your text height will vary dynamically.
DEMO http://jsfiddle.net/fRbNe/
html, body {
height: 100%;
}
#top-area {
position: relative;
height: 70%;
width:100%;
}
#top-area img {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
#top-area p {
margin:0;
padding:0;
text-align: center;
top:40%;
height: 100%;
width:100%;
position: absolute;
color: white;
font-family:'Montserrat', sans-serif;
font-size: 3em;
}

Answer 2

Here is your code refactored to work. It makes the top-area the one that determines the size of the image as the image just fills the space. Then centers the text by moving it left and top 50% of the top-area's size and then translating it back 50% of the p's size. This is a sure fire way for any sized image and any size of text.
<div id="top-area">
<img src="http://ts2.mm.bing.net/th?id=H.4836061304389953&pid=1.7" alt="background image #1" />
<p>Some text</p>
</div>
#top-area {
position: relative;
width: 100%;
height: 70%;
}
#top-area img{
width: 100%;
height: 100%;
}
#top-area p{
position: absolute;
color: white;
font-family: 'Montserrat', sans-serif;
font-size: 3em;
top: 50%;
left: 50%;
transform:translate(-50%, -50%);
-webkit-transform:translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
}
Codepen to see it working:http://cdpn.io/zFJgh

Answer 3

I believe Travis's answer would require browser support for background size which is still lacking for IE8. Something like this should work though, placing both the image and a span in a div:
div.largeImageContainer,
img.largeImage{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
div.largeImageContainer{
top: 30%;
text-align: center;
}
span.largeImageText{
position: relative;
top: 50%;
line-height: 16px;
margin-top: -8px;
}

Answer 4

All the proposed solutions so far aren't "ideal".
First of all if your image does not belong to the content itself, do not use an image element. Instead apply it as a background-image.
Using the new CSS3 background options you can additionally set e.g. the background-size, -clip, -origin and so on ...!
And to horizontally and vertically centering your text in the element, simply set its display value to 'table-cell' and 'text-align: center' and 'vertical-align: middle' - that's it.
<div id="top-area">
<p>Some text</p>
</div>
html, body {height: 100%;}
#top-area {
display: table;
width: 100%;
height: 70%;
border: 1px solid red;
/*background-image: ... */
}
#top-area p {
display: table-cell;
text-align: center;
vertical-align: middle;
}
See jsFiddle
Browser Support: IE 8+ and all "modern" browsers
PS: The "modern way" will be using Flexbox