Centering a div over an image - html

Question

I searched around here and got a lot of answers but they just don't seem to be working. What I have is a div with an image filling the div (100% to make it responsive). Now I want to put some info on the image so I used an article. But my problem is that I can't get my article to remain at the center(horizontal and vertical) of the image while i shrink my page. it centers well horizontally but vertically it just goes out, disrupting the parts below (although I haven't worked on them yet). Any solutions is appreciated. Thanks.
HTML:
<div class="featuredpost">
<img src="images/forest.jpg">
<div class="featured">
<article>
<header>
<h1>Featured Post Goes Here</h1>
</header>
<footer>
<p class="postedby">Postedby User</p>
</footer>
<content>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</content>
<button type="button" onclick="alert('Hello world!')">Read More</button>
</article>
</div>
</div>
CSS:
.featuredpost{
width: 100%;
margin: 0 auto;
}
.featuredpost img{
width:100%;
height: auto;
position: relative;
}
.featured{
margin: 0 auto;
width: 80%;
background-color: rgba(0,0,0,0.5);
color: #fff;
top:50%;
position: absolute;
left: 10%;
}
.featured article{
padding: 10px 30px;
}

Answer 1

HTML
<div id="container">
<div id="overlay"></div>
<img id="img" />
</div>
CSS
#container {
position: relative;
}
#overlay, #img {
position: absolute:
top: 0px; left: 0px;
}
#overlay {
z-index: 5;
}

Answer 2

You could set the html/body to behave like one table-cell.
http://codepen.io/anon/pen/Iplbv
html {
display: table;
height: 100%;
width: 100%;
background-size: cover;
}
body {
display:table-cell;
vertical-align:middle;
}
.featured{
margin: 0 auto;
width: 80%;
background-color: rgba(0,0,0,0.5);
color: #fff;
position:relative;
}
.featuredimg {
position:absolute;
top:0;
left:0;
width:100%;
}
And even set image as a background:
http://codepen.io/anon/pen/wKrae
html {
display:table;
height:100%;
width:100%;
background:url(images/forest.jpg);
background-size:cover;
}
body {
display:table-cell;
vertical-align:middle;
}

Answer 3

I had the same issue as you and I'm going to go with this.
You have a div with a background image (table)
A box to hold the title (table-cell)
A box to center #2 inside of (table)
The actual content of the title (varies)
Here is a pseudo-code example so you can see the nesting
<1 table>
<3 table>
<2 cell>title</2>
</3>
</1>
Since #2 is inside of #3 and #3 is inside of #1 you get a table inside of a table so you may also need another wrapper around #3 as a table cell to center #3
article header h2:after{
content: "";
display: block;
border-bottom: 1px solid #3cc19c;
margin: 1em 45%;
}
.image-box { /* BACKGROUND FOR HEADER */
background-image: url(https://placeholdit.imgix.net/~text?txtsize=83&txt=1000%C3%97500&w=1000&h=500);
background-size: cover;
background-repeat: no-repeat;
display: table;
width: 100%;
}
.title-container-frame{ /* BOX FOR TITLE TO SIT IN */
width: 300px;
height: 300px;
background: white;
display: table;
outline: 4px double white;
margin: 100px auto;
}
.title-container{ /* HOLDS THE TITLE TO BE CENTERED */
display: table-cell;
vertical-align: middle;
}
article{
text-align:center;
}
<article>
<header>
<div class="image-box">
<div class="title-container-frame">
<div class="title-container">
<h2>Meet Shawn</h2>
<h3>A stand up guy</h3>
</div>
</div>
</div>
</header>
<div class=bit-2>
<hr>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>Candid wedding photogrpahy is my passion. I can't imagine doing anything else for a living. The best wedding photography captures raw emotional moments that words cannot capture.</p>
<p>True-to-life imagery is the new direction of wedding photography. We provides beautiful images to our clients on their wedding day while everyone is chomping at the bit to see them.</p>
<p>"Lorem derit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>Please feel free to contact me <a>email#email.com</a> I would love to answer any questions you might have.</p>
</div>
</article>
See https://jsfiddle.net/0qa2g4b5/
I would divide up the image into all the parts that have to respond to a changing screen size first and then come up with your css solution. That's what I tried to do above.
It's going to depend a little on the specifics of how you want the end result to respond to a smaller screen.
Most likely the most elegant solution is to #media css to adjust your styles when you think they stop looking good.
Some easier less elegant solutions all seem to have drawbacks, here are some you can consider and the drawbacks so you know if you can live with that:
If the background image is purely for design and can be clipped you can use background-size: cover; if you need the background width to take up 100% of the div and still show the entire image use background-size:contain cover crops your image in some cases.
You can't both contain the flexible sized background div and keep a fixed height inner container like a title box because at some point the height of your title box will be more than the background if you change from a landscape aspect ratio like 16:9 to a vertically held iphone aspect ratio 9:16.
So if you want it to completely resize so the title text resizes with the div you can do font-size:1em on a container and font-size:inherit on the text or use vh vw measurements on either the box holding the title or the text itself to resize based on screen size. The problem you'll run into there is the text will get too small to read at some point or it will look huge on a desktop. That's why I would recommend using:
#media (min-width: 50em) and (max-width: 68.75em) {/*CSS for medium screen*/}
#media (max-width: 50em) {/.../}`
Then go in and adjust the screen size and make whatever changes you need for phones and smaller screens (chrome developer mode has a tool for this)