Perfectly Center Any Element with Flexbox

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

.centered-item {
  /* Your item styles */
  padding: 20px;
  background-color: #f0f0f0;
}

How it works: This snippet demonstrates how to perfectly center any child element within its parent Flex container. By setting `display: flex` on the parent, it becomes a flex container. `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). Using `min-height: 100vh` ensures the container takes up the full viewport height, allowing for true vertical centering.