4 ways to center a component/div in CSS

#webdev #css #beginners #javascript

Flexbox
Grid
Margin auto on a flex item
Position

/* Using Flexbox */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Grid */
.parent {
  display: grid;
  justify-content: center;
  align-items: center;
}

/* Grid */
.parent {
  display: grid;
  place-items: center;
}

/* margin auto on a flex items */

.parent {
  display: flex;
}
.child {
  margin: auto;
}

/* Using Position */
.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%); /* OR right: 0; bottom: 0; */
}