Perfectly Centering Content with Flexbox

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

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

How it works: This snippet demonstrates the most straightforward way to perfectly center an item within a container using Flexbox. By setting `display: flex;` on the parent container, its direct children become flex items. `justify-content: center;` then aligns items along the main axis (horizontally by default), and `align-items: center;` aligns them along the cross axis (vertically by default). This combination ensures the child element is centered both horizontally and vertically, regardless of its size.