CSS 垂直居中的方式

垂直居中

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

  1. table自带居中功能

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

    一串文字
    .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

    一串文字
    .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%

    一串文字
    .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;
    }

你可能感兴趣的