Vertical (or Not) Alignment

This property aligns elements on the cross axis.

Options:

• stretch (default): Stretches elements to full width/height. If children have no size set, they'll fill everything.
• center: Perfect center.
• baseline: Alignment by " baseline " of text. If you have a small button and large heading in a row, their letters will be on the same line.

.modal-header {
  display: flex;
  align-items: baseline; /* Heading text and 'Close' button text will be on same level */
}

.parent {
  display: flex;
  justify-content: center; /* Center on main */
  align-items: center;     /* Center on cross */
}