Div on top of image and centered horizontally and vertically

[toolman]

Hi,

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:

Edit fiddle - JSFiddle - Code Playground

Can anyone suggest a way of achieving this?

Thanks.

[coothead]

Hi there toolman,

here is a basic example…

https://codepen.io/coothead/full/MWwWzXB

HTML:-

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

CSS:-

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;
}

coothead

[toolman]

Thank you so much
That would fantastic!

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

[coothead]

@toolman

Is it generally ok to use absolute positioning?

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.

coothead