盒子水平垂直居中的8种方案

2022-05-18 114 阅读1分钟

1.使用定位+margin-top+margin-left(纯计算）

1652876082(1).png

2.使用定位+transform

1652875801(1).png

3.使用定位+top+left+margin-top+margin-left

1652877636(1).png

4.使用定位+margin

1652876839(1).png

5.flex

1652877254(1).png

6.使用table-cell+vertical-align+margin

1652878278(1).png

7.使用子盒子设置成行内块元素

1652878613(1).png

8.使用JavaScript

1652879859(1).png

1652879894(1).png