关于前端页面居中的四种方式 //小白随手

第一种 flex 弹性盒子布局

        父盒子设置

                 display: flex;

                  justify-content: center;

                  align-items: center;

第二种 定位+平移

        父相子绝  父盒子相对定位 子盒子绝对定位 +   平移      

        子盒子代码

                  left: 50%;

                  top: 50%;

                  transform: translate(-50%,-50%);

第三种  定位+四个方位0 + margin

        同样是父相子绝  以下是子盒子代码

           left: 0;

          top: 0;

          right: 0;

          bottom: 0;

          margin: auto;

第四种 table-cell

        父盒子代码 

                  display: table-cell;

                  text-align: center;

                  vertical-align: center;