整理一下关于水平垂直居中的CSS

我了解的总共有三种方法：

• 1.利用绝对定位和相对定位

• 2.利用flex布局

• 3.利用table布局

第一种是用绝对定位和相对定位来实现的

 .outer{
            height: 100%;
            width: 100%;
            position:relative;
            
        }
        .middle{
            width: 100%;
             position:absolute;
             top:50%;
             text-align: center;
        }
        .inner{
            margin: 0 auto;
        }

实现的效果是这样的

那，这样就可以实现水平居中了。

第二种是flex布局

.outer{
            height: 100%;
            display: flex;
            align-items: center;
            justify-content:center;
            background-color: aqua;
        }
        .inner{
            height: 100px;
            width: 100px;
            background-color: blue;
        }

这个只需要两层嵌套就可以啦

实现效果奉上

最后一个就是table布局啦，这个跟第一种一样也是三层嵌套的，代码如下

  .outer{
            width: 100%;
            height: 100%;
            display: table;
           
        }
        .middle{
            display: table-cell;
            vertical-align: middle;
            text-align: center;
          
        }
        .inner{
            margin:0 auto;
           
        }

接着上效果图

效果是这样的 以上，就是我知道的水平垂直居中的三种方法。