css的居中方式

1.1、水平居中：margin: 0 auto

1.2、绝对定位水平垂直居中

                     <div style="position: absolute;

                                 width: 500px;

                                 height: 300px;

                                 margin: auto;

                                 top: 0;

                                 left: 0;

                                 bottom: 0;

                                 right: 0;

                                 background-color: green;">水平垂直居中</div>

1.3、利用margin：

                     <div style="position: relative;

                           width:400px;

                           height:200px;

                           top: 50%;

                           left: 50%;

                           margin: -100px 0 0 -200px;

                           background-color: red;">水平垂直居中</div>

1.4、利用位移：

                     <div style="position: absolute;

                           width:300px;

                           height:200px;

                           top: 50%;

                           left: 50%;

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

                           background-color: blue;">水平垂直居中</div>

1.5、flex 布局居中

<div style="display: flex;align-items: center;justify-content: center;">

    <div style="width: 100px;height: 100px;background-color: gray;">flex 布局</div>

</div>