Vertically center Inline Block Modal Dialog-CodePudding

I'm trying to vertically center a modal-dialog which has display: inline-block in order to change the width of the modal based on the content. I centered the modal horizontally with text-align: center on modal, this does not center it vertically though. How do I go about centering it vertically?

.modal {
    text-align: center;
}

.modal-dialog {
     max-width: 100%;
     width: auto !important;
     display: inline-block;
}

<div  id="pictureModal" tabindex="-1">
    <div >
        <div >
            <div >
                <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div >
              Content
            </div>
        </div>
    </div>
</div>

CodePudding user response：

I think it would be the easiest to pass modal-dialog-center next to modal-dialog class (as per bootstrap docs). Your display type shouldn't affect vertical centering

https://getbootstrap.com/docs/4.0/components/modal/#vertically-centered

CodePudding user response：

You can try using flexbox. This code will center the modal content vertically -

.modal {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}