史上最全垂直居中方法(almost)总结

雨点打透心脏的1/2处 2022-11-25 10:15 144阅读 0赞

// HTML 结构
    <div class="container">
        <div class="center"></div>
    </div>

// table法
    .container { 
      width: 600px;
      height: 400px;
      background: #eee;
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }
    .center { 
      background: tomato;
    }

// 绝对定位法+transform（常用）
    .container { 
      height: 400px;
      background: #eee;
      position: relative;
    }
    .center { 
      background: tomato;
      position:absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

// flex 个人常用，有兼容性风险
    .container{ 
      height: 400px;
      background: #eee;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .center{ 
      width: 100px;
      height: 100px;
      background: tomato;
    }

// 绝对定位+margin特性
    .container{ 
        width: 400px;
        height: 400px;
        background: gray;
        position: relative;
    }
    .center { 
        position: absolute;
        height: 200px;
        width: 200px;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }

// grid网格法
    .container{ 
        display: grid;
        width: 300px;
        grid-template-columns: repeat(3, 100px); 
        grid-template-rows: repeat(3, 100px);
        background: gainsboro;
    }
    
    .center { 
        background: tomato;
        grid-column: 2 / 3;
        grid-row: 2 / 2;
    }

如果你已经看到这里，那咱们也是有缘人，老衲将收藏多年的最简方法授予你：

.container { 
        height: 400px;
        display: flex;
    }
    .center { 
        margin: auto;
        width: 100px;
    	height: 100px;
    	background: tomato;
    }