Flexbox: Centering Content Horizontally and Vertically

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

.centered-item {
  padding: 20px;
  background-color: #f0f0f0;
  border: 1px solid #aaa;
  text-align: center;
  font-family: sans-serif;
  font-size: 1.2em;
  color: #333;
}

How it works: This snippet demonstrates the most straightforward method to center content both horizontally and vertically using Flexbox. By setting `display: flex` on the parent container, and then `justify-content: center` along the main axis (horizontal for `flex-direction: row` default) and `align-items: center` along the cross axis (vertical), any child element will be perfectly centered within it. The `min-height: 100vh` ensures the container takes up at least the full viewport height for a clear demonstration.