<section class="parent">
  <div class="content">
    Flexbox for the win
  </div>
</section>
// Pen CSS
.parent {
  width: 100vw;
  height: 100vh;
  background-color: #dce775;
  // centering inner content
  display: flex;
    // centering along main axis - X axis - Horizontal
  justify-content: center;
    // centering along cross axis - Y axis - Vertical
  align-items: center;
}

.content {
  color: #ffffff;
  background: #d84315;
  padding: 3rem 5rem;
}


// Reset
body {
  margin: 0;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.