Universal css style centering method, how many do you know?

1. Pure flex method:

  • Key points: Set the following attributes for the parent element (hereinafter collectively referred to as the parent element fa) of the element to be centered (hereinafter collectively referred to as the child element son): display: flex; justify-content: center; align-items: center; .
  • Case and renderings:

2. flex+auto method:

  • Key points: set display: flex for the parent element fa, and set a height value for the parent element; then set margin: auto; for the child element son to achieve centering.
  • Case renderings:

 

3. table method:

  • Key points: use table-cell to achieve.
  • Case renderings:

 

Four. grid method:

  • Key points: use grid to achieve.
  • Case renderings:

 

Five.absolute + transform method:

  • Important: Use the positioning property and transform implementation.
  • Case renderings:

 

Six.absolute + margin auto method:

  • Key points: Use positioning attributes and margins to achieve.
  • Case renderings:

 

Guess you like

Origin blog.csdn.net/Yi2008yi/article/details/123229455