Flexbox Perfect Centering

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

.item {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  display: flex; /* If item itself needs to center its children */
  justify-content: center;
  align-items: center;
  color: white;
}

How it works: This snippet demonstrates how to perfectly center any child element inside a parent container using Flexbox. By setting `display: flex` on the parent, `justify-content: center` handles horizontal alignment, and `align-items: center` handles vertical alignment, ensuring the child is always in the middle. The `min-height: 100vh` on the container is an example to ensure it fills the viewport, making the centering effect visible.