Centering

Centering a Block Horizontally Within Another Block

Set the left and right margins of a child block element to auto to center it horizontally within a parent block element. Changing the text-align property of the parent affects the alignment of text in the child element but not the alignment of the child itself as text-align applies to inline elements.

body {
  
  
  
}

.parent {
  
  
  
  
  
  
}

.child {
  
  
  
  
  
  
  
}

Centering a Block Horizontally and Vertically Within Another Block

Set a parent's display to flex and a child's margins to auto to center the child horizontally and vertically within the parent. text-align applies to inline elements, not block elements, so the parent's text-align only affects the horizontal alignment of the child's text, not the alignment of the child itself. Similarly, vertical-align has no effect as it also applies to inline elements (and table cells).

body {
  
  
  
}

.parent {
  
  
  
  
  
  
  
}

.child {
  
  
  
  
  
  
  
}