margin：auto垂直方向怎么理解？

Question

1.我已经了解正常流中的块级元素框的水平总和就等于父元素的width，水平方向的 auto，其计算值取决于可用空间（剩余空间）。
2.问题是垂直方向：这两个demo，高度都已定，可分配的剩余空间为什么不一样？
demo1：（成功水平，垂直居中）

            .father {
                position: relative;
                width: 100px;
                height: 100px;
                    }
            .son {
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                width: 50%;
                height: 50%;
                margin: auto;
            }

demo2：（没有垂直居中）

            .father {
                position: relative;
                width: 100px;
                height: 100px;
                    }
            .son {
                width: 50%;
                height: 50%;
                margin: auto;
            }

Answer 1

`//    文字垂直居中 高度不统一的情况下
<div class="wrapper">hello world</div>
.wrapper:after {
    display:inline-block;
    width:0;
    height:100%;
    vertical-align:middle;
    content:"";
}`