本文详细介绍了CSS中实现元素居中的六种常见方法：纯flex法、flex+auto法、table法、grid法、absolute + transform法以及absolute + margin auto法，并通过案例展示了每种方法的效果。这些方法涵盖了现代布局中的多种场景，帮助开发者更好地理解和应用CSS布局。
一.纯flex法：
- 要点：给要被居中的元素（以下统称为子元素son）的父元素（以下统称为父元素fa）设置如下属性：display: flex; justify-content: center; align-items: center; 。
- 案例及效果图：
二.flex+auto法：
- 要点：给父元素fa设置display:flex，并且要给父元素设置高度值；然后给子元素son设置margin: auto;即可实现居中。
- 案例效果图：
三.table法：
- 要点：使用table-cell实现。
- 案例效果图：
四.grid法:
- 要点：使用grid实现。
- 案例效果图：
五.absolute + transform法：
- 要点：使用定位属性和transform实现。
- 案例效果图：
六.absolute + margin auto法：
- 要点：使用定位属性和margin实现。
- 案例效果图：
扫一扫
2819
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
