CSS容器水平和垂直居中的方法总结

    在实际工作中，经常会遇到容器居中问题，而CSS容器水平和垂直居中的方法，网络上已经有很多相关文章，在这里，我爱模板网也对工作中用到的一些居中方法进行了总结，并加入了一些自己的观点，如有错误欢迎指正。

    假设有如下html和样式，我们需要将inner容器居中：

<style type="text/css">
    #outer{height: 500px; background: #62bcfb}
    #inner{width:200px; height: 200px; background: #0d9450}
</style>
<div id="outer">
    <div id="inner"></div>
</div>

一、绝对定位：首先让outer相对定位relative，其次让inner绝对定位absolute，同时left和top都是50%，此时inner的左上角在outer的正中间，所以，只要让它margin-left和margin-top都是负的自身高度的一半即可：

<style type="text/css">
    #outer{height: 500px; background: #62bcfb; position: relative;}
    #inner{width:200px; height: 200px; background: #0d9450; position: absolute; left:50%; top:50%; margin-left:-100px; margin-top:-100px;}
</style>
<div id="outer">
    <div id="inner"></div>
</div>

    效果如下：


    此外，这种写法的margin-left和margin-top也可以换成transform:translate(-100px,-100px)。
    注：这里的inner是必须要有宽高

二、绝对定位2：首先让outer相对定位relative，其次让inner绝对定位absolute，四个方向的距离都为0，再加上margin:auto即可：

<style type="text/css">
    #outer{height: 500px; width: 500px; background: #62bcfb; position: relative;}
    #inner{background: #0d9450; margin: auto; position: absolute; width:200px; height:200px; left:0; right: 0; top:0; bottom:0;}
</style>
<div id="outer">
    <div id="inner"></div>
</div>

    效果如下：


    注：这里的inner是必须要有宽高的，因为四个方向都为0，一旦不写宽度，inner就会“触及底线”。

三、模拟单元格table-cell：因为表格单元格的vertical-align:middle，可以轻松让里面的内容垂直居中，这个方法就是利用这个特性来实现垂直居中的：

<style type="text/css">
    #outer{height: 500px; width: 500px; background: #62bcfb; display: table-cell; vertical-align: middle;}
    #inner{background: #0d9450; margin: auto; height:200px; width:200px;}
</style>
<div id="outer">
    <div id="inner"></div>
</div>

    注：1、outer由于变成了表格，不再像普通的块容器宽度默认一整行，所以要加上宽度。
        2、这个方法既适用于固定高度的容器，也适用于不固定高度的容器。

四、CSS3的flex：outer要变成flex容器，并且垂直居中用align-items: center，水平居中用：justify-content: center

<style type="text/css">
    #outer{height: 500px; background: #62bcfb; display: flex; align-items: center; justify-content: center;}
    #inner{background: #0d9450; height:200px; width:200px;}
</style>
<div id="outer">
    <div id="inner"></div>
</div>

    注：此方法非常好用，当然不考虑兼容性。而且，inner无论是否有宽高都适用。

五、CSS3的flex配合margin：此方法可以被视为上面的升级版，outer要变成flex容器，inner边距自动即可

<style type="text/css">
    #outer{height: 500px; background: #62bcfb; display: flex;}
    #inner{background: #0d9450; margin: auto; height:200px; width:200px;}
</style>
<div id="outer">
    <div id="inner"></div>
</div>

    注：此方法非常好用，当然不考虑兼容性。而且，inner无论是否有宽高都适用。

    就总结到这里了，已经够用了，随着浏览器兼容性越来越好，上面的很多方法已经可以放心使用了。当然，如果各位有更好的方法，欢迎在下方评论留言哦！