⊙ How to Center Anything in CSS

Flexbox — The Recommended Method

Flexbox is the cleanest way to center both horizontally and vertically. Apply it to the parent element:

/* Center a child both ways */
.parent {
  display: flex;
  align-items: center;      /* vertical */
  justify-content: center;  /* horizontal */
}

/* Minimum height so there's space to center in */
.parent {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;        /* full viewport */
}

CSS Grid

Grid has an even shorter syntax for centering using place-items:

.parent {
  display: grid;
  place-items: center;   /* centers both axes in one line */
  min-height: 100vh;
}

place-items is shorthand for align-items + justify-items. This is the most concise centering solution in CSS.

Absolute Positioning

For elements positioned outside the normal flow (overlays, tooltips, loading spinners):

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Centering Text

/* Horizontal only */
p { text-align: center; }

/* Vertically in a fixed-height element */
.btn {
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

/* Single-line text vertical centering (old method) */
.btn {
  height: 44px;
  line-height: 44px; /* match height */
}

Centering Images

/* Block-level centering */
img {
  display: block;
  margin: 0 auto;
}

/* Inside a flex container */
.card {
  display: flex;
  flex-direction: column;
  align-items: center;  /* centers img horizontally */
}

/* Object-fit for cropped images */
.avatar {
  width: 80px;
  height: 80px;
  object-fit: cover;
  object-position: center;
}

Which Method to Use?