垂直居中 absolute 和 flex 方法

基於絕對定位 absolute /不確定子元素寬高

1:子元素確定固定寬高

 .parent{
        position:relative;
      }
      
 .child{
        position:absolute;
        top:50%;
        width:18em;
        height:6em;
        margin-top:-3em;
        margin-left:-9em;
      }

2:寬高不固定

 .parent{
        position:relative;
      }

 .child{
         position:absolute;
         top:50%;
         height:50%;
         transform:translate(-50%,-50%);
      }

基於Flexbox的解決方案

 .parent{
        display:flex;

    }
 .child{
        margin:auto;
    } 
    

或者直接設定align-items,不需要再給子元素設定樣式

    
  .parent{
        display:flex;
        align-items:center;
    }