css盒子居中方法简单化

直接复制代码就可以看到效果的哦，在面试中总结出来的（希望对大家有帮助）

html结构

    <div class="outer">
        <div class="inner">
        </div>
    </div>

css样式

 /* 方法一： (运用到表格相关知识)*/
       .outer{
             300px;
            height: 300px;
            border: 1px solid #000;
            display:table-cell;
            text-align:center;
            vertical-align:middle; 
        }
        .inner{
             50px;
            height: 50px;
            background: pink;
            display:inline-block;
            vertical-align: middle; 
        } 

 /* 方法二： (运用到css3过渡动画的相关知识)*/
       .outer{
            position: relative;
             300px;
            height: 300px;
            border: 1px solid #000;
        }
        .inner{ 
            position: absolute;
            top: 50%;
            left: 50%; 
            transform: translate(-50%,-50%);
             50px;
            height: 50px;
            background: pink;
           
           
        } 

 /* 方法三： (纯定位内容)*/
       .outer{
            position: relative;
             300px;
            height: 300px;
            border: 1px solid #000;
        }
        .inner{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
             50px;
            height: 50px;
            background: pink;
        } */

/* 方法四：(flex布局) */
        .outer{
             300px;
            height: 300px;
            border: 1px solid #000;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .inner{
             50px;
            height: 50px;
            background: pink;
        }