For most of my websites, I typically place content within a div that features rounded corners with a shadow effect. Recently, I've been trying to figure out if it's possible for this parent div to automatically center both vertically and horizontally while adjusting its height and width based on the content inside it. The CSS code below is the closest I've come to achieving this, but the div remains anchored to the upper left corner of the page. Although the content fits well, the positioning is not ideal.
.appRoundedShadow {
display: inline-block;
justify-content: center;
align-items: center;
height: auto;
width: auto;
background-color: white;
padding: 25px;
border-radius: 20px;
border: 1px outset gray;
box-shadow: 10px 10px 5px #888888;
}
So far, I have not managed to achieve the desired result using flexbox.