Revision history [back]

There are different techniques to align elements vertically inside a div container, some of them are:

1. Using Flexbox: Set the parent container display property to flex and align the child elements using the align-items and justify-content properties.

Example:

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
}

.child {
  /* add styles for child element */
}

1. Using CSS Grid: Use the grid layout to define rows and columns and align the child elements using the align-self and justify-self properties.

Example:

.parent {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.child {
  align-self: center;
  justify-self: center;
  /* add styles for child element */
}

1. Using vertical-align property: Use the vertical-align property on the child elements if they are inline-block or table-cell elements.

Example:

.parent {
  /* add styles for parent element */
}

.child {
  display: inline-block;
  vertical-align: middle;
  /* add styles for child element */
}