垂直居中 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;
    }