margin：auto垂直方向上为什么无法居中？

因为在垂直方向上，块级元素不会自动扩充，它的外部尺寸没有自动充满父元素，也没有剩余空间可说。所以margin：auto不能实现垂直居中。

如何使用margin：auto垂直居中？

当一个绝对定位元素，其对立定位方向属性同时有具体定位数值的时候，就有流体特性

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>margin：auto垂直居中demo</title>
  6.     <style>
  7.         * {
  8.             padding: 0;
  9.             margin: 0;
  10.         }
  11.         .box {
  12.             width: 100px;
  13.             height: 100px;
  14.             border: 1px solid;
  15.             position: absolute;
  16.             top: 0;
  17.             bottom: 0;
  18.             margin: auto;  
  19.         }
  20.     </style>
  21. </head>
  23. <body>
  24.     <div class="box">123123</div>
  25. </body>
  27. </html>