Div on top of image and centered horizontally and vertically


I am trying to have an image that is centered both horizontally and vertically in a wrapper and then have a div placed on top of the image that is also centered horizontally and vertically.

I am not sure how to do this. I have tried using absolute positioning, but read this is not a good idea. Also, I am unsure how absolute positioning would work responsively.

This is the fiddle I have:

Can anyone suggest a way of achieving this?


Hi there toolman,

here is a basic example…



 <img src="https://i.picsum.photos/id/229/427/578.jpg" width="427" height="578" alt="">  
    Lorem ipsum 


div {
    position: relative;
    max-width: 64em;
    padding: 4em 1em;
    margin: auto;
    border: 1px solid #000;
    background-color: #ccc;

div img {
    display: block;
    width: 75%;
    height: auto;
    margin: auto;
    border: 1px solid #000; 

div > div {
    position: absolute;
    width: 50%;
    padding: 3em;
    border: 1px solid #000;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50% );
    background-color: rgba( 255, 200, 255, 0.5 );
    text-align: center;


1 Like

Thank you so much :smiley:
That would fantastic!

Is it generally ok to use absolute positioning? I was reading that these days it’s not so good?

It is absolutely perfect to use it when it’s usage,
in conjunction with position:relative, is
appropriate. Stacking elements one above the
other should be considered as one of those
occasions. :winky: