A CodePen by malei0311. css-vertical-align-six-demos

index.html

<div class="demo1">
  <div class="demo1-inner">normal</div>
</div>

<div class="demo2">
  <div class="demo2-inner">normal calc</div>
</div>
<div class="demo3">
  <div class="wrapper">
    <div class="inner">flex</div>
    <div class="inner">flex</div>
    <div class="inner">flex</div>
  </div>
</div>
<div class="demo4">
  <div class="wrapper">
    <div class="inner">before hack</div>
    <div class="inner">before hack</div>
      <div class="inner">before hack</div>
  </div>
</div>

<div class="demo5">
  <div class="wrapper">
    <div class="inner">table-cell</div>
    <div class="inner">table-cell</div>
    <div class="inner">table-cell</div>
  </div>
</div>
<div class="demo6">
  <div class="wrapper">
    <div class="inner">absolute</div>
  </div>
</div>

style.scss

@import "compass";
$baseColor: #00fffc;
$demoHeight: 500px;
$demoNum: 6;

html, body {
  margin: 0;
  background: #252728;
}

%demo {
  position: relative;
  height: $demoHeight;
  width: 100%;
  box-shadow: 0 0 30px rgba(255,255,255,.4) inset;
  
  @media (min-width: 1000px) {
    float: left;
    width: 50%;
  }
}

%dashLine {
  content: '';
  display: block;
  position: absolute;
}

/* @mixin justify-content($xx) {
  @if $xx == space-around {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: distribute;
    -o-box-pack: justify;
    box-pack: justify;
    justify-content: $xx;
  }
}

@mixin align-items($oo){
  @if $oo == center {
    -moz-box-align:  center;
    -webkit-box-align: center;
    box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
} */

@for $i from 1 through $demoNum {
  .demo#{$i} {
    @extend %demo;
    background: rgba(adjust-hue($baseColor, $i *36deg), .6);
    
    &:before {
      @extend %dashLine;
      height: 100%;
      width: 0px;
      border-left: 1px dashed rgba(255,255,255,.5);
      left: 50%;
    }
    
    &:after {
      @extend %dashLine;
      height: 0;
      width: 100%;
      border-top: 1px dashed rgba(255,255,255,.5);
      top: 50%;
    }
  }
}

.demo1-inner {
  height: 100px;
  width: 100px;
  background: rgba(0,0,0,.2);
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -50px;
  margin-left: -50px;
  color: #ECF0F1;
}

.demo2-inner {
  height: 100px;
  width: 100px;
  background: rgba(0,0,0,.2);
  position: absolute;
  left: calc(50% - 50px);
  top: calc(50% - 50px);
  color: #ECF0F1;
}

.demo3 {
  .wrapper {
    display: flex;
    //background: red;
    align-items: center;
    justify-content: space-around;
    height: 100%;
    position: relative;
    left: 0;
    top: 0;
    
    .inner {
      //margin: auto; // 听说有 bug，待测
      
      background: rgba(0,0,0,.2);
      padding: 10px;
      color: #ECF0F1;
    }
  }
}

.demo4 {
  .wrapper {
    height: 100%;
    width: 100%;
    font-size: 0;
    text-align: center;
    //background: red;
    
    &:before {
      content: ' ';
      display: inline-block;
      vertical-align: middle;
      height: 100%;
      width: 0;
      background: blue;
    }
    
    .inner {
      display: inline-block;
      vertical-align: middle;
      font-size: 16px;
      background: rgba(0,0,0,.2);
      padding: 10px;
      color: #ECF0F1;
      margin: 0 5px;
    }
  }
}

.demo5 {
  .wrapper{
    width: 2000px;  // 尽可能大，适应大分辨率，hack 需谨慎
    height: $demoHeight;
    //background: red;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    
    .inner {
      background: rgba(0,0,0,.2);
      color: #ECF0F1;
      padding: 10px;
      border-bottom: 1px dashed rgba(255,255,255,.2);
    }
  }
}

.demo6 {
  .wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    //background: red;
    width: 100%;  
    height: 100%;
    margin: 0;
    
    .inner {
      position: absolute;
      background: rgba(0,0,0,.2);
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      height: 50px;
      display: block;
      text-align: center;
      margin: auto;
      color: #ECF0F1;
    }
  }
}