CSS writing-mode与普通块状元素margin:auto垂直居中实例页面

展示

代码

• HTML：

  <p><strong>默认流</strong></p>
  <div class="box">
      <div class="auto">div块状元素</div>
  </div>
  
  <p><strong>垂直流</strong></p>
  <div class="box verticle-mode">
      <div class="auto">div块状元素</div>
  </div>

• CSS：

  .box {
      height: 240px; width: 300px;
      background-color: #f0f3f9;
      overflow: hidden;
  }
  .auto {
      display: block;
      margin-top: auto;
      margin-bottom: auto;
      background-color: #34538b;
      color: #fff;
  }
  
  .verticle-mode {
      writing-mode: tb-rl;
      -webkit-writing-mode: vertical-rl;      
      writing-mode: vertical-rl;
  }