美文网首页
【转载】11种垂直居中的方法

【转载】11种垂直居中的方法

作者: 优秀的收藏转载分享 | 来源:发表于2021-12-22 10:29 被阅读0次

    原文:CSS 垂直居中的正确打开方式

    image.png
    <div class="parent">
        <div class="child">这是垂直居中的元素</div>
    </div>
    

    居中元素宽高已知

    1. absolute + margin auto
    .parent{
      position: relative;
      width: 90vw;
      height: 90vh;
      border: 3px solid steelblue;
    }
    
    .child{
      background: tomato;
      width: 50vw; height: 50vh;
      /* 核心代码 */
      position:absolute;
      top: 0; bottom: 0; left: 0; right: 0;
      margin: auto;
    }
    
    2. absolute + 负 margin
    .parent{
      position:relative;
      width: 90vw;
      height: 90vh;
      border: 3px solid steelblue;
    }
    
    .child{
      background: tomato;
      width: 100px; height: 100px;
      /* 核心代码 */
      position:absolute;
      top: 50%; left: 50%;
      margin-top: -50px;
      margin-left: -50px;
    }
    
    
    3. absolute + calc
    .parent{
      width: 90vw;
      height: 90vh;
      border: 3px solid steelblue;
      /* 核心代码 */
      position:relative;
    }
    
    .child{
      background: tomato;
      width: 200px; height: 200px;
      /* 核心代码 */
      position:absolute;
      top: calc(50% - 100px);
      left: calc(50% - 100px);
    }
    
    

    居中元素宽高未知

    4. absolute + transform

    transformtranslate 属性值如果是一个百分比,那么这个百分比将是基于自身的宽高计算出来的。

    .parent{
      width: 90vw;
      height: 90vh;
      border: 3px solid steelblue;
      /* 核心代码 */
      position:relative;
    }
    
    .child{
      background: tomato;
      /* 核心代码 */
      position:absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    
    5. line-height + vertical-align

    把当前元素设置为行内元素,然后通过设置父元素的text-align: center; 实现水平居中;
    同时通过设置当前元素的 vertical-align: middle; 来实现垂直居中;
    最后设置当前元素的 line-height: initial; 来继承父元素的line-height

    .parent{
      width: 90vw;
      border: 3px solid steelblue;
      /* 核心代码 */
      line-height: 500px;
      text-align: center;
    }
    
    .child{
      background: tomato;
      /* 核心代码 */
      display: inline-block;
      vertical-align: middle;
      line-height: initial;
    }
    
    6. table 表格元素

    通过最经典的 table 元素来进行水平垂直居中,不过代码看起来会很冗余,不推荐使用;

    <table>
      <tbody>
        <tr>
          <td class="parent">
            <div class="child"></div>
          </td>
        </tr>
      </tbody>
    </table>
    
    <style>
      .parent {
        width: 90vw;
        height: 90vh;
        border: 3px solid steelblue;
        /* 核心代码 */
        text-align: center;
      }
      .child {
        background: tomato;
        /* 核心代码 */
        display: inline-block;
      }
    </style>
    
    7. css-table 表格样式
    .parent{
      width: 90vw;
      height: 90vh;
      border: 3px solid steelblue;
      /* 核心代码 */
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }
    
    .child{
      background: tomato;
      /* 核心代码 */
      display: inline-block;
    }
    
    8. flex 布局(一)

    justify-content 表示:设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式;
    align-items 表示:定义 flex 子项在 flex 容器的当前行的侧轴(纵轴)方向上的对齐方式。

    .parent {
      width: 90vw;
      height: 90vh;
      border: 3px solid steelblue;
      
      /* 核心代码 */
      display: flex;
      justify-content: center;
     align-items: center;
    }
    .child{
      background: tomato;
    }
    
    9. flex + margin auto(二)
    .parent{
      width: 90vw;
      height: 90vh;
      border: 3px solid steelblue;
      
      /* 核心代码 */
      display: flex;
    }
    
    .child{
      background: tomato;
      
      /* 核心代码 */
      margin: auto;
    }
    

    附赠 flex 兼容性图片一张

    image.png
    10. grid 网格布局 (一)

    grid 布局相信大家在实际项目中用的较少,主要是该布局实在是太超前,导致了兼容性不是那么理想,但是不可否认的是 grid 的能力在 css 布局中绝对是一个质的飞越。

    .parent{
      width: 90vw;
      height: 90vh;
      border: 3px solid steelblue;
      /* 核心代码 */
      display: grid;
      align-items: center;
      justify-content: center;
    }
    
    .child{
      background: tomato;  
    }
    
    11. grid 网格布局 (二)
    .parent{
      width: 90vw;
      height: 90vh;
      border: 3px solid steelblue;
      /* 核心代码 */
      display: grid
    }
    
    .child{
      background: tomato;
      /* 核心代码 */
      align-self: center;
      justify-self: center;
    }
    

    附赠 grid 兼容性图片一张

    image.png
    • 如果你的项目 在PC 端有兼容性要求并且宽高固定,推荐使用 absolute + 负 margin 方法实现;
    • 如果你的项目 在 PC 端有兼容性要求并且 宽高不固定,推荐使用 css-table 方式实现;
    • 如果你的项目 在 PC 端无兼容性要求 ,推荐使用 flex 实现居中,当然不考虑 IE 的话,grid也是个不错的选择;
    • 如果你的项目在 移动端使用 ,那么推荐你使用 flexgrid 也可作为备选。

    还有一些比较冷门的方式方法,例如 伪类元素、grid-container 的 grid-template-rows 等......

    相关文章

      网友评论

          本文标题:【转载】11种垂直居中的方法

          本文链接:https://www.haomeiwen.com/subject/rbhqqrtx.html