how to center a <div>

Flexbox: Set the container to display: flex;, then use justify-content: center; for horizontal and align-items: center; for vertical centering.

.container {

  display: flex;

  justify-content: center;

  align-items: center;

}

Grid: Apply display: grid; to the container and place-items: center; to center both horizontally and vertically.

.container {

  display: grid;

  place-items: center;

}

Auto Margins: For horizontal centering, use margin: auto; with a specified width on the child div.

.child {

  margin: 0 auto;

  width: 50%;

}