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>

  

 

  

posted @ 2018-04-18 10:41  炫冰G爱  阅读(242)  评论(0编辑  收藏  举报