css技巧 ——CSS Tricks

垂直居中

未知父元素高度

.parentElement {
  display: block;
  &:before {
    content: " ";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
  }
  .childElement {
    display: inline-block;
    vertical-align: middle;
  }
}

已知父元素高度

.parentElement {
  height: xxx;
  .childElement {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
}

Flex布局

.parentElement{
  display: flex;
  align-items: center
}

Table

.parentElement {
  display: table;
  .childElement {
    display: table-cell;
    vertical-align: middle;
  }
  .grandsonElement {}
}

消除图片下方间隙

通过设置给 img 元素设置 vertical-align: top 消除行内元素的间隙（仅对 img 元素有用）

vertical-align: baseline;
vertical-align: top;  //切换查看效果

图文居中

 img{
    vertical-align: middle;
  }

三角形边框

// 带边框的三角形
    .border-triangle{
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 50px 50px 50px;
      position:relative;
      border-color: transparent transparent #fff transparent;
      &::before{
        content:'';
        border-style: solid;
        border-width: 0 52px 52px 52px;
        border-color: transparent transparent #00adb5 transparent;
        position: absolute;
        left:-52px;top:-1px;
        z-index: -1;
      }
    }