A centered modal with a backdrop
July 31, 2014
If you want a centered modal with a backdrop, your markup should look like:
<div class="modal> <div class="modal-content"> Super awesome modal stuff </div> </div>
And your style looks like:
.modal position: fixed top: 0 left: 0 bottom: 0 background-color: rgba(0, 0, 0, 0.4) z-index: 1 display: block .modal-content z-index: 9999 position: absolute top: 50% left: 50% transform: translate(-50%, -50%) display: block min-height: 30rem min-width: 30rem
The relation between top, left, and transform is the magic sauce for centering.
Hey, I'm Ian. I build websites and write about what I learn as I go. Follow me on Twitter.