学习前端也有好一段时间了，刚好做一个备忘，关于常见的水平居中、垂直居中、居中布局的解决方案备忘。

水平居中解决方法

水平居中的效果很简单，就是外面有一个容器，里面也有一个容器，想让里面的容器水平居中在外面的容器中的解决办法。

• 使用inline-block + text-align 解决

      .child{
            display: inline-block;
        }
        .parent{
            text-align: center;
        }

     <div class="parent">
        <div class="child">DEMO</div>
    </div>

• 使用table+margin解决

        .child{
            display: table;
            margin: 0 auto;
        }

    <div class="parent">
        <div class="child">DEMO</div>
    </div>

• 使用absolute + transform解决

        .child{
           position: relative;
        }
        .parent{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }

    <div class="parent">
        <div class="child">DEMO</div>
    </div>

• 使用flex + justify-content解决

     .child{
           display: flex;
           justify-content: center;
    }

    <div class="parent">
        <div class="child">DEMO</div>
    </div>

除了 justify-content方法以外，也可以使用这样的方法

        .child{
            margin: 0 auto;
        }
        .parent{
            display: flex;
        }
    <div class="parent">
        <div class="child">DEMO</div>
    </div>

垂直居中解决方案

• 使用table-cell + vertical-align方法解决

        .parent{
            display: table-cell;
            vertical-align: middle;
        }
    <div class="parent">
        <div class="child">DEMO</div>
    </div>

• 使用absolute + transform方法解决

        .parent{
            position: relative;
        }
        .child{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

    <div class="parent">
        <div class="child">DEMO</div>
    </div>

• 使用flex + align-item 方法解决

        .parent{
            display: flex;
            align-items: center;
        }

    <div class="parent">
        <div class="child">DEMO</div>
    </div>

居中解决方案（水平居中+垂直居中）

• inline-block + text-align + table-cell + vertical-align解决

        .parent{
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }
        .child{
            display: inline-block;
        }

    <div class="parent">
        <div class="child">DEMO</div>
    </div>

• 使用absolute + transform 方法解决

        .parent{
            position: relative;
        }
        .child{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }

    <div class="parent">
        <div class="child">DEMO</div>
    </div>

• 使用flex + justify-content + align-items 方法解决

        .parent{
            display: flex;
            justify-content: center;
            align-items: center;
        }

    <div class="parent">
        <div class="child">DEMO</div>
    </div>

通过上面的几种方法其实都能实现各种居中的方法，但是我个人建议就是能用flex就用flex解决。真的非常方便。