likes
comments
collection
share

CSS 垂直居中的方式

作者站长头像
站长
· 阅读数 64

垂直居中

自己整理一下收集到的垂直居中的方式:

  1. table自带居中功能

    <table>
     <tr>
         <td>
             <div>表格垂直居中</div>
         </td>
     </tr>
    </table>
    <div class="like-table">
     <div>假的表格垂直居中</div>
    </div>
    .like-table{
     display:table-cell;
    }
  2. 设定行高 适用于「单行」的「行内元素」 ( inline、inline-block ),将line-height设成和高度一样的数值,则内容的行内元素就会被垂直置中。
  3. 设定伪类元素使用伪元素的方式。在此之前,先解释一下 vertical-align 用来指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式。这个属性是加在容器内部较高的元素上, 使其基线相对保持在较高元素中间,因此,如果有一个方块变成了高度100%,那么其他的方块就会真正的垂直居中。所以使用伪类的方式,

    <div class="parent">
      <div class="child">
       一串文字
      </div>
    </div>
    
    .parent{
      text-align: center;
    }
    
    .child{
      border: 3px solid black;
      display: inline-block;
      width: 300px;
      vertical-align: middle;
    }
    
    .parent:before{
      content:'';
      outline: 3px solid red;
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }
    .parent:after{
      content:'';
      outline: 3px solid red;
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }
  4. margin: auto

    <div class="parent">
      <div class="child">
       一串文字
      </div>
    </div>
    .parent{
      height: 600px;
      position: relative;
    }
    .child{
      position: absolute;
      width: 300px;
      height: 200px;
      margin: auto;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
  5. margin-top:-50%

    <div class="parent">
      <div class="child">
       一串文字
      </div>
    </div>
    .parent{
      height: 600px;
      position: relative;
    }
    .child{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
  6. transform

    .parent{
      height: 600px;
      border: 1px solid red;
      position: relative;
    }
    .child{
      border: 1px solid green;
      width: 300px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -150px;
      height: 100px;
      margin-top: -50px;
    }
  7. flex布局

    .parent{
      display: flex;
      justify-content: center;
      align-items: center;
    }
  8. grid布局

    .parent{
      display:grid;
      justify-content:center;
      align-content:center;
    }
转载自:https://segmentfault.com/a/1190000041202385
评论
请登录