css实现水平垂直居中,任意父级高度的垂直居中

//方式一
#container{
  position:relative;  
}
#center{
  position:absolute;
  width:100px;
  height:100px;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  //margin:-50% 0 0 -50%    
}
//方式二
#container{
  display:flex;
  justify-content:center;
  align-items:center;  
}
//方式三
#container{
    text-align: center;
    width: 500px;
    height:200px; 
    ine-height:200px; 
}
#center{
    display: inline-block;
    vertical-align: middle;
}
//方式四 //使用display:table实现（不兼容ie6/7）
<div style="text-align: center; width: 500px;height:200px; display: table;border: green solid 1px;">
    <span style="display: table-cell; vertical-align: middle; ">
        <img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="display: inline-    block;" />
    </span>
</div>    
//方式五  任意父级高度的垂直居中，自适应居中（也可以用伪元素替代span标签）

<div style="height:200px;text-align:center;">
    <img src="../../images/zhuyin.png" alt="" style="vertical:middle"> 
    <span style="display:inline-block;height:100%;vertical-align:middle;font-size:0;"></span> 
</div>