Centering - Horizontal and Vertical

Horizontal Centering

Inline element

• No CSS property to center
• we use “text-align” to its parent

Block element

• set width margin: auto

.element {
   margin: 0 auto; /** width margin is auto, height margin 0 **/
}

• Use Flexbox to its parent:

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

Vertical Centering

Inline element

• Use vertical-align

Block element

• margin:auto DOESN’T WORK
• Use Flexbox to its parent:

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