HuntExams Academy
HTML/CSSBeginner#css#flexbox#layout-puzzle

How do you center a div both horizontally and vertically?

With Flexbox, set display: flex, justify-content: center, and align-items: center on the parent. With Grid, place-items: center on the parent does the same in one line. Absolute positioning with transform is an older alternative.

Example
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
/* Grid one-liner */
.parent2 { display: grid; place-items: center; height: 100vh; }

Related Questions

1
HTML/CSSIntermediate#css#layout-puzzle

How do you build a sticky footer that stays at the bottom even with little content?

Open
2
HTML/CSSBeginner#css#grid

Explain CSS Grid: grid-template-columns/rows and fr unit.

Open
3
HTML/CSSAdvanced#css#grid

How do you create a responsive grid without media queries using auto-fit/auto-fill?

Open