css trouble combining absolute positioning, max-dimensions and centering - css

Question

I've done my share of css, and think I know all the usual tricks, but this one stumped me. I'm trying to absolutely position a caption box over an image (implemented as background-image) with a list of requirements:
Should be centered
Should have max-width and max-height as percentages of the image.
Should have bottom 10% from parent, and resize up with more content
Text content over maximum size should be hidden, but the background with it's rounded border-radius corners should remain visible.
The following is the closest I've come - it fails at centering:
.container {
background-image: url('http://via.placeholder.com/400x400');
height: 400px;
width: 400px;
position: relative;
}
.caption {
position: absolute;
bottom: 10%;
margin: 0 auto;
max-width: 75%;
max-height: 25%;
overflow: hidden;
box-sizing: border-box;
background-color: rgba(75,75,75,0.4);
border-radius: 5px;
padding: 10px;
text-align: center;
color: white;
}
<div class="container">
<div class="caption">
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.
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.
</div>
</div>
I know lots of ways to center of course, but none I try maintain the other requirements.
I don't mind wrapping one or more extra elements around .caption if it achieves all my aims. Anyone able to help? Thanks in advance.

Answer 1

Wrap the caption in another div with the dimensions and positioning you require.
.container {
background-image: url('http://via.placeholder.com/400x400');
height: 400px;
width: 400px;
position: relative;
margin: 1em auto;
}
.wrap {
width: 75%;
max-height: 80%;
position: absolute;
transform: translateX(-50%);
bottom: 10%;
border-radius: 5px;
left: 50%;
overflow: hidden;
}
.caption {
box-sizing: border-box;
background-color: rgba(75, 75, 75, 0.4);
padding: 10px;
text-align: center;
color: white;
}
<div class="container">
<div class="wrap">
<div class="caption">
<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 </p>
</div>
</div>
</div>
<div class="container">
<div class="wrap">
<div class="caption">
<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. 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>
</div>
</div>
</div>

Answer 2

add left:0px and right:0px to .caption
.container {
background-image: url('http://via.placeholder.com/400x400');
height: 400px;
width: 400px;
position: relative;
}
.caption {
position: absolute;
bottom: 10%;
margin: 0 auto;
max-width: 75%;
max-height: 25%;
overflow: hidden;
left: 0px;
right: 0px;
box-sizing: border-box;
background-color: rgba(75,75,75,0.4);
border-radius: 5px;
padding: 10px;
text-align: center;
color: white;
}
<div class="container">
<div class="caption">
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.
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.
</div>
</div>