<div class="modal">
  Modal
</div>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum nulla unde corporis blanditiis soluta! Tempore dolores eum eaque veniam nam perspiciatis porro minus! Perferendis similique id nisi dignissimos saepe nesciunt?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum nulla unde corporis blanditiis soluta! Tempore dolores eum eaque veniam nam perspiciatis porro minus! Perferendis similique id nisi dignissimos saepe nesciunt?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum nulla unde corporis blanditiis soluta! Tempore dolores eum eaque veniam nam perspiciatis porro minus! Perferendis similique id nisi dignissimos saepe nesciunt?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum nulla unde corporis blanditiis soluta! Tempore dolores eum eaque veniam nam perspiciatis porro minus! Perferendis similique id nisi dignissimos saepe nesciunt?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum nulla unde corporis blanditiis soluta! Tempore dolores eum eaque veniam nam perspiciatis porro minus! Perferendis similique id nisi dignissimos saepe nesciunt?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum nulla unde corporis blanditiis soluta! Tempore dolores eum eaque veniam nam perspiciatis porro minus! Perferendis similique id nisi dignissimos saepe nesciunt?
html { box-sizing: border-box; }
* { box-sizing: inherit; }

body {
  margin: 1em;
  background-color: #eee;
  color: #555;
}

.modal {
  width: 500px;
  height: 100px;
  top: 50%;
  left: 50%;
  margin-left: -250px;
  margin-top: -50px;
  // Comment out the negative margins and comment back in this transform:
  // transform: translate(-50%, -50%);
  position: fixed;
  box-shadow: 0 0 20px -5px #000;
  background-color: #fff;
  padding: 1em;
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.