页面的垂直居中布局

垂直居中布局是指当前元素在父级元素中，垂直方向是居中显示的。
第一种解决方案：
改变父级元素的display属性，设置为table-cell，改变vertical-align属性为middle；

#f {
            background-color: red;
            height: 200px;
            width: 400px;
            display: table-cell;
/*display属性设置为table表示<table>元素，设置为table-cell表示<td>单元格。*/
           vertical-align: middle;
/* vertical-align设置文本内容的垂直对齐方式（top，middle，bottom）*/        }
        #c {
            height: 100px;
            width: 100px;
            background-color: yellow;
        }
<div id="f">
            <div id="c"></div>
        </div>

这种解决方案兼容性较好，但同样的，vertical-align具有继承性。

第二种解决方案：
通过定位的方式解决。
给父级元素设置相对定位（relative）
给子级元素设置绝对定位，同时设置top为50%，transform的值为translateY(-50%)。
例如：

#f{
                background-color: red;
                height: 200px;
                width: 400px;
                
                position:absolute;
            }
            #c{
                height: 100px;
                width: 100px;
                background-color: yellow;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
            }
<div id="f">
            <div id="c"></div>
            </div>