25 CSS Hacks Every Developer Should Know

Centering Elements Vertically and Horizontally

Problem: centering an element in a container both vertically and horizontally.

Solution: use flexbox.

.container {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center; /* vertical */
  height: 100vh;
}