关于flex:4种常见方式带你实现元素水平垂直居中

 咱们在进行页面布局时，元素程度垂直居中是必备的布局形式之一，那么上面咱们来总结四种咱们常见的程度垂直居中的形式，你经常应用哪种呢？

html对立代码

    <div class="out">
        <div class="inner">

        </div>
    </div>

table-cell布局

 css代码

    .out{
          width: 400px;
          height: 400px;
          background-color: pink;
          display: table-cell;
          vertical-align: middle;
      }
      .inner{
          width: 200px;
          height: 200px;
          background-color: #bfa;
          margin: 0 auto;
      }

相对定位+margin:auto;

        .out{
            width: 400px;
            height: 400px;
            background-color: pink;
            position: relative;
        }
        .inner{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
        }

相对定位+负magin或2d转换

.out{
            width: 400px;
            height: 400px;
            background-color: pink;
            position: relative;
        }
        .inner{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            position: absolute;
            left: 50%;
            top: 50%;
            /* 应用负margin与2d转换皆可 */
            /* margin-left: -100px;
            margin-top: -100px; */
            transform: translate(-50%,-50%);
        }

flex布局

 应用flex布局此时要留神兼容问题

         .out{
            width: 400px;
            height: 400px;
            background-color: pink;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .inner{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }

 
对于实现元素程度垂直居中的四种形式的分享就到这啦。