Perfectly Center Elements with Flexbox (Horizontal & Vertical)

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

.centered-item {
  padding: 20px;
  background-color: #f0f0f0;
  border: 1px solid #999;
}

How it works: This snippet demonstrates how to achieve perfect centering of an item within its container using Flexbox. By setting `display: flex` on the container, `justify-content: center` centers items along the main axis (horizontally by default), and `align-items: center` centers them along the cross axis (vertically by default). This is a robust and widely used method for centering.