Effortlessly Center Content Vertically and Horizontally with Flexbox

.container {
  display: flex;
  justify-content: center; /* Centers horizontally along main axis */
  align-items: center;    /* Centers vertically along cross axis */
  min-height: 100vh;      /* Example: make container full viewport height */
  border: 1px solid #ccc;
}

.item {
  padding: 20px;
  background-color: lightblue;
  border-radius: 5px;
}

How it works: This snippet demonstrates the simplest way to center an item inside a container using Flexbox. By setting `display: flex` on the parent, `justify-content: center` centers children along the main axis (horizontally by default), and `align-items: center` centers them along the cross axis (vertically by default). This is a highly efficient and readable method for perfect centering.