盒子水平居中的 5 种方式--父子盒子

1.子绝父相，

top:50%,left:50%,margin-top/margin-left 负的-子盒子宽度的一半；

2.子绝父相

left/top/right/bottom=0，margin=auto;

 3.子绝父相，

top:50%,left:50%, transform:translate(-50%,-50%)

4.flex布局，

diaplay:flex; 水平： justtufy-content:center; 竖直：algin-items：center；

5.grid 网格布局

display:grid; place-items:center;

代码展示：

                                                                             01

                                                                             02

 03

04 

                                                                            05.

eg:效果