css块元素的水平垂直居中方法

首先一个简单的样式

    

    

1.方法1

  外盒子：position: relative;

  内盒子：position: absolute;

                margin: auto;

                left: 0;

                right: 0;

                top: 0;

                bottom: 0;

           

2.方法2

      外盒子：position: relative;

      内盒子：position: absolute;

                   left: 50%;

                   top: 50%;

                  margin-top: -50px;

                  margin-left: -50px;

        

3.方法3

    外盒子：position: relative;

    

内盒子：position: absolute;

               left: 50%;

               top: 50%;

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

   

4.方法4

   外盒子： display: table-cell;

                  text-align: center;

                 vertical-align: middle;

   内盒子：display: inline-block;

                 vertical-align: top;

    

5.方法5（使用弹性盒子）

   外盒子：display: flex;

                 justify-content: center;

                align-items: center;