CodePen Embed - align-content: center in block layout (needs Chrome 123+ or Safari 17.4+)

<div class="center">
  <h1>I am centered vertically</h1>
</div>

.center {
  border: 5px solid #1a73e8;
  align-content: center;
  padding: 10px;
  max-width: 550px;
  height: 300px;
}

h1 {
  background-color: #006bee;
  color: #fff;
  padding: 10px;
}

This Pen is owned by web.dev on CodePen.

See more by @web-dot-dev on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.