<section class="parent">
  <div class="content">
    CSS transform in action
  </div>
</section>
// Pen CSS
.parent {
  width: 100vw;
  height: 100vh;
  background-color: #dce775;
}

.content {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  // Expects a fixed width 
  width: 160px;
  // aesthetic styles
  padding: 3rem;
  color: #ffffff;
  background: #d84315;
}


// 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.