<!--  our html has a container and text content inside -->
<div class="container center">
  this text should be centered
</div>
    
.container {
  background: black;
  font-size: 2rem;
  color: turquoise;
  height: 800px;
}

/* This is the main CSS that centers the text */
.center {
  text-align: center;
  vertical-align: middle;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.