Absolute Centering a DIV with CSS Only

Use this snippet to position a div at the absolute center of your browser window, both horizontally and vertically. Replace the is-Fixed class with is-Responsive for responsive web design. The snippet was originally shared on CodePen.

<div class="Center-Container">
  <div class="Absolute-Center is-Fixed"></div>
</div>

<style>
  /*
////////////////////////////////////////
Absolute Centering
////////////////////////////////////////
*/
  .Absolute-Center {
    height: 50%; /* Set your own height: percents, ems, whatever! */
    width: 50%; /* Set your own width: percents, ems, whatever! */
    overflow: auto; /* Recommended in case content is larger than the container */
    margin: auto; /* Center the item vertically & horizontally */
    position: absolute; /* Break it out of the regular flow */
    top: 0;
    left: 0;
    bottom: 0;
    right: 0; /* Set the bounds in which to center it, relative to its parent/container */
    background-color: #000;
  }

  /* //////////////////////////////////////// */
  /* Make sure our center blocks stay in their container! */
  .Center-Container {
    position: relative;
  }

  /* //////////////////////////////////////// */
  /* Fixed floating element within viewport */
  .Absolute-Center.is-Fixed {
    position: fixed;
    z-index: 999;
  }

  /* //////////////////////////////////////// */
  /* Min/Max Width */
  .Absolute-Center.is-Responsive {
    width: 60%;
    height: 60%;
    min-width: 200px;
    max-width: 400px;
    padding: 40px;
  }
</style>

Awards & Recognition