Centering Content Perfectly with Flexbox

.container {
  display: flex;
  justify-content: center; /* Horizontally center */
  align-items: center;    /* Vertically center */
  min-height: 100vh;      /* Example: full viewport height */
  border: 1px solid #ccc;
}

.centered-item {
  padding: 20px;
  background-color: lightblue;
  font-family: sans-serif;
  color: #333;
}

How it works: This snippet utilizes Flexbox to achieve perfect centering of an item within its container. By setting `display: flex` on the parent, its children become flex items. `justify-content: center` aligns items along the main axis (horizontally by default), and `align-items: center` aligns them along the cross axis (vertically by default). Setting a `min-height` on the container ensures it has enough space to demonstrate vertical centering, typically for full-page or section centering.