Center Any Element Vertically and Horizontally

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

.grid-container {
  display: grid;
  place-items: center; /* Centers both horizontally and vertically */
  min-height: 100vh; /* Example: container takes full viewport height */
  border: 1px dashed #ccc;
}

.centered-item {
  width: 150px;
  height: 100px;
  background-color: #007bff;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2em;
}

How it works: This snippet demonstrates two common and effective ways to perfectly center a single element within its parent using CSS. The Flexbox method uses `display: flex` on the container combined with `justify-content: center` for horizontal alignment and `align-items: center` for vertical alignment. The Grid method uses `display: grid` and the more concise `place-items: center` property, which is a shorthand for both `justify-items` and `align-items`. Both approaches provide robust, cross-browser compatible centering solutions ideal for modals, loading spinners, or any UI component requiring precise alignment.