Vertical center

3 snippets in HTML & CSS

HCHTML & CSS

Align Items (Cross Axis)

syntax

align-items: stretch | flex-start | center | flex-end | baseline;

example

/* Vertically center items in a row */
.toolbar {
  display: flex;
  align-items: center;
  height: 64px;
}

/* Align text baselines across different font sizes */
.price-row {
  display: flex;
  align-items: baseline;
}

Note align-items controls alignment on the cross axis (vertical in row, horizontal in column). The default is stretch, which makes items fill the container height. Use baseline to align items by their text baseline regardless of size.

Center Anything with Flexbox

HC · Flexbox

syntax

display: flex;
justify-content: center;
align-items: center;

example

/* Center a single element both horizontally and vertically */
.page-center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Shorter alternative using place properties */
.quick-center {
  display: flex;
  place-content: center;
  place-items: center;
}

Note This three-line pattern is the simplest way to center anything vertically and horizontally. Add min-height: 100vh to center within the full viewport.

Centering Methods Summary

HC · Layout & Positioning

syntax

/* Horizontal block centering */
margin: 0 auto;
/* Flex centering */
display: flex; justify-content: center; align-items: center;
/* Grid centering */
display: grid; place-items: center;
/* Absolute centering */
position: absolute; inset: 0; margin: auto;

example

/* Method 1: margin auto (horizontal only) */
.container { margin: 0 auto; max-width: 800px; }

/* Method 2: flexbox (both axes) */
.flex-center { display: flex; justify-content: center; align-items: center; }

/* Method 3: grid (both axes, shortest) */
.grid-center { display: grid; place-items: center; }

/* Method 4: absolute (both axes, within parent) */
.abs-center { position: absolute; inset: 0; margin: auto; width: fit-content; height: fit-content; }

Note For most cases, the grid place-items: center approach is the shortest and most versatile. Use margin auto for simple block-level horizontal centering. The absolute method works when you need to center within a positioned parent.