Ian McNally

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.

Tada:

Ian McNally

Hey, I'm Ian. I build websites and write about what I learn as I go. Follow me on Twitter.