通過以下兩種方法便可以實現垂直居中的操作了，並且可以實現子元素在一個不清楚寬高的父元素中垂直居中的效果。
方法1. 使用定位和負margin可以實現。
（缺點：這種方法可以不用知道父元素的寬高，但是必需得知道子元素的寬高才可以設定）

<style type="text/css">
    .parent{
        /*父元素寬高隨便設定*/
        width: 700px;
        height: 500px;
        background: silver;
        position: relative;
        /*給父元素相對定位relative*/
 

    }
    .son{
        width: 200px;
        height: 150px;
        background: lightgoldenrodyellow;
        position: absolute;
        /*子元素設定絕對定位absolute*/
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top: -75px;
        /*設定偏移值left、top 和 負的margin使得子元素在父元素中居中*/
    }
</style
 
>

<div class="parent">
    <div class="son"></div>
</div>

方法 2. 使用彈性盒子flexbox進行佈局。
做法：只需要給父元素設定三條屬性值（display: flex;justify-content: center;align-items: center;），不需要考慮父元素和子元素的寬高問題。

<style type="text/css">
    .parent{
        /*父元素寬高隨便設定*/
        width: 1200px;
        height
 
: 700px;
        background: silver;

        display: flex;
        /*justify-content屬性定義了子專案在主軸上（X軸）的對齊方式。*/
        justify-content: center;
        /*align-items屬性定義子專案在交叉軸（Y軸上）上如何對齊。*/
        align-items: center;
    }
    .son{
        /*子元素寬高隨便設定*/
        width: 200px;
        height: 150px;
        background: lightgoldenrodyellow;
        /*align-self: center;*/
        /*可以不用設定：align-self屬性允許單個子專案有與其他子專案不一樣的對齊方式，可覆蓋父元素的align-items屬性。
         * 預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch
         */
    }
</style>

<div class="parent">
    <div class="son"></div>
</div>