万能的css样式居中法总结,你知道几个?

2,952 阅读1分钟
一.纯flex法:
  • 要点:给要被居中的元素(以下统称为子元素son)的父元素(以下统称为父元素fa)设置如下属性:display: flex; justify-content: center; align-items: center; 。

  • 案例及效果图: image.png image.png

二.flex+auto法:
  • 要点:给父元素fa设置display:flex,并且要给父元素设置高度值;然后给子元素son设置margin: auto;即可实现居中。

  • 案例效果图: image.png image.png

三.table法:
  • 要点:使用table-cell实现。

  • 案例效果图:

image.png image.png

四.grid法:
  • 要点:使用grid实现。

  • 案例效果图:

image.png image.png

五.absolute + transform法:
  • 要点:使用定位属性和transform实现。

  • 案例效果图:

image.png image.png

六.absolute + margin auto法:
  • 要点:使用定位属性和margin实现。

  • 案例效果图:

image.png image.png