HTML: how to vertically center an object with CSS?

There are several ways to vertically center an object with CSS:

Flexbox

<div class="container">
  <div class="center-item">
    <!-- content goes here -->
  </div>
</div>

.container {
  display: flex;
  align-items: center;
  height: 100%;
}

This method uses the CSS flexbox layout to center the child element vertically within the parent container. The align-items property set to center aligns the child element along the cross axis.

Grid Layout

<div class="container">
  <div class="center-item">
    <!-- content goes here -->
  </div>
</div>

.container {
  display: grid;
  place-items: center;
  height: 100%;
}

This method uses the CSS grid layout to center the child element vertically and horizontally within the parent container. The place-items property set to center aligns the child element both vertically and horizontally.

Table Cell

<div class="container">
  <div class="center-item">
    <!-- content goes here -->
  </div>
</div>

.container {
  display: table-cell;
  vertical-align: middle;
  height: 100%;
}

This method uses the CSS table layout to center the child element vertically within the parent container. The display: table-cell and vertical-align: middle properties treat the parent container as a table cell and vertically center the child element within it.

Transforms

<div class="container">
  <div class="center-item">
    <!-- content goes here -->
  </div>
</div>

.container {
  position: relative;
  height: 100%;
}
.center-item {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

This method uses CSS transforms to center the child element vertically within the parent container. The top: 50% property positions the child element vertically halfway down the parent container, and the transform: translateY(-50%) property moves the child element upwards by half its own height, effectively centering it vertically within the parent container.

Foto von Jackson Sophat auf Unsplash.