Stacking Elements Vertically and Centering with Flexbox

.flex-container-column {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centers items along the main axis (vertical) */
  align-items: center;    /* Centers items along the cross axis (horizontal) */
  min-height: 200px; /* Example height */
  border: 1px solid #ccc;
}

.flex-item {
  background-color: lightcoral;
  padding: 10px 20px;
  margin-bottom: 10px;
  text-align: center;
}

.flex-item:last-child {
  margin-bottom: 0;
}

How it works: This snippet demonstrates how to arrange multiple items in a vertical stack and perfectly center them within their container using Flexbox. `display: flex` establishes a flex container. `flex-direction: column` directs flex items to stack vertically. `justify-content: center` centers items along the main axis (which is vertical in a column-direction flex container), and `align-items: center` centers them along the cross axis (horizontally).