<div>
  <p>I'm centered horizontally and vertically!</p>
</div>
div {
  /* center all the things */
  display: flex;
  justify-content: center;
  align-items: center;

  /* giving the container height, width, and a border */
  width: 100%;
  height: 200px;
  border: 2px gray dashed;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.