css让容器水平垂直居中的7种方式

方法七：兼容低版本浏览器，不固定宽高

XML/HTML Code复制内容到剪贴板

<!– html –>  
<div class="table">  
    <div class="tableCell">  
        <div class="content">不固定宽高，自适应</div>  
    </div>  
</div>  
  

CSS Code复制内容到剪贴板

/*css*/ .table { height: 200px;/*高度值不能少*/ width: 200px;/*宽度值不能少*/ display: table; position: relative; float:left; background: yellow;   
} .tableCell { display: table-cell; vertical-align: middle; text-align: center;           
    *position: absolute; padding: 10px;   
    *top: 50%;   
    *left: 50%;   
} .content {   
    *position:relative;   
    *top: -50%;   
    *left: -50%; background: green;   
}   
  

暂时总结上面的七种，这种方法太多，其实只要习惯了其中的一两种也就够用了。

总结

如果是移动端，那么用方法四和方法五是比较方便的。而且支持不固定宽高的情况，快、准、狠
也就是用 flex; align-items: center; justify-content: center;

XML/HTML Code复制内容到剪贴板

<!– html –>  
<div class="wrap">  
    <div class="center"></div>  
</div>  
  

CSS Code复制内容到剪贴板

/* css */ .wrap { background: yellow; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center;   
} .center { background: green; width: 100px; height: 100px;   
}   
  

或者display:flex;margin:auto;

XML/HTML Code复制内容到剪贴板

<!– html –>  
<div class="wrap">  
    <div class="center"></div>  
</div>  
  

CSS Code复制内容到剪贴板

/* css */ .wrap { background: yellow; width: 200px; height: 200px; display: flex;