css样式控制元素居中

网页中有时需要使网页中的元素保持垂直方向的居中，不使用JS控制。

1.绝对定位居中

一般父级是相对定位或者是固定定位，需要垂直方向上居中的元素块是相对定位，而且必须设置高度。

<style>
        html,body{
            padding:0;
            margin:0;
        }

        .container{
            height:600px;
            position:relative;
            background:#eee;
        }
        .content{
            height:200px;
            position:absolute;
            margin:auto;
            left:0;
            right:0;
            top:0;
            bottom:0;
            background: lightblue;
        }

</style>
<div class="container">
    <div class="content"></div>
</div>

如果需要有边框效果，可以修改left、right、top、bottom的值，它的对应边设置为auto。

.content{
            height:200px;
            width:200px;
            position:absolute;
            margin:auto;
            left:20px;
            right:auto;
            top:50px;
            bottom:auto;
            background: lightblue;
        }

可以给高度和宽度设置百分比，以达到自适应的效果。

.content{
            height:40%;
            width:60%;
            position:absolute;
            margin:auto;
            left:0;
            right:0;
            top:0;
            bottom:0;
            background: lightblue;
        }

2. 负外边距居中

让居中的的元素为绝对定位，上左各定位50%，再减去居中元素高度的一半。

.content{
            height:300px;
            width:200px;
            position:absolute;
            left:50%;
            top:50%;
            margin-top:-150px;
            margin-left:-100px;
            background: lightblue;
        }

需要设置高度，不能自适应，有可能内容溢出。

3. translate

能实现绝对居中同样的效果，也支持联合可变高度方式使用。内容块定义transform: translate(-50%,-50%)必须带上浏览器厂商的前缀，还要加上

top: 50%; left: 50%;

.content{
            width:250px;
            height:50%;
            position:absolute;
            top:50%;
            left:50%;
            -webkit-transform: translate(-50%,-50%);
            -moz-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
            -o-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
            background: lightblue;
        }

4.table-cell

内容块高度会随着实际内容的高度变化，浏览器对此的兼容性也好。

.container{
            height:600px;
            width:600px;
            display: table-cell;
            vertical-align: middle;
            background:#eee;
        }
.content{
            height:200px;
            width:200px;
            margin:0 auto;
            background: lightblue;
        }

5.inline-block

内容块宽度设置最大不能超过容器的100%减去0.25em，否则使用伪元素:after内容块会被挤到容器顶部，使用:before内容块会向下偏移100%。

.container{
            width:500px;
            height:500px;
            overflow: hidden;
            text-align: center;
            background: #666;
        }
        .container:after,.content{
            display: inline-block;
            vertical-align: middle;
        }
        .container:after{
            content: "";
            height: 100%;
            margin-left: -0.25em;
        }

http://blog.csdn.net/freshlover/article/details/11579669?locationNum=2