七种方式实现垂直居中

前端小菜鸡123
139 阅读1分钟

当高度未写死时，用 padding: 10px 0 即可实现垂直居中，但当高度写死时，实现垂直居中就需用到一些其它方法，如下：

1、flex 布局

image.png

2、绝对定位 + 位移

image.png

3、绝对定位 + 负 margin

该方法需知道子元素的宽度和高度

image.png

4、绝对定位 + margin: auto

image.png

5、table 自带功能

image.png

6、div 改装成 table + vertical-align: middle

image.png

7、伪元素 + vertical-align: middle

image.png

参考文章
avatar
文章
阅读
粉丝