div水平垂直居中-优快云博客

本文介绍了多种CSS布局中实现元素水平垂直居中的方法，包括负margin法、transform法、绝对定位法、table方法、inline-block方法及CSS3 flexbox方式等。

我写着这篇的目的主要是自己在复习一遍水平垂直居中。
并有借鉴http://blog.youkuaiyun.com/freshlover/article/details/11579669中的方法。

代码和效果在文章最下方，下面是说明。
一、已知div宽高
例子:下面代码中的method1
父元素relative，子元素absolute
子元素：①top：50% left：50% 这会使子元素相对于父元素向右向下移动父元素50%宽高的距离，此时会使子元素未知处于父元素偏右下侧一些②margin-left:-100px;margin-top:-100px（距离为子元素宽高的一半），此时会使子元素向左向右移动子元素宽高一半的距离，从而达到了水平居中的效果。

二、div宽高知道不知道都可以
1、css3 transform
例子:下面代码中的method2
原理和上面的相同，只不过将margin的用法改成了css3的transform:translate(-50%,-50%)，translate的参数为族元素大小的百分比，达到了不需要明确知道宽高既可向修正位置的效果。

2、绝对定位法
例子:下面代码中的method3
文章开的链接将此方法命名为绝对定位法。
我们都知道margin：0 auto;可以达到水平居中的效果。其实margin：auto;就可以做到水平垂直居中，只不过要把top: 0; left: 0; bottom: 0; right: 0;写上。

3、display:table的方法
例子:下面代码中的method4
最外层元素display：table 中元素display：table-cell 对中间元素设vertical-align：middle 就可以达到垂直居中效果，在加上text-align:center 就实现了水平垂直居中。此方法是将div转变为table去设置样式，因为vertical-align对div是无效的。

4、display:inline-block
例子:下面代码中的method5
大概是通过设置display：inline-block和伪元素从而使vertical-align生效。具体是怎么实现的还没有完全理解。

5、CSS3：justify-content:center; align-items: center;
例子:下面代码中的method6
justify-content是设置水平位置的属性 align-items是设置竖直方向的属性。具体看CSS3手册就可以。
display:flex后,align-items:center为垂直居中，justify-content:center;为水平居中
flex为弹性盒模型，css3的一种新布局方式，这里只是给出了方法，并没有解释原因，想知道为什么的可以看下http://www.cnblogs.com/xuyuntao/articles/6391728.html

需要注意的是transform 和 justify-content:center; align-items: center;都是CSS3的东西，对于一些老的浏览器入IE8之前的兼容性不是很好。

    <style>
        #method1{
            width:500px;height:500px;background-color:#eee;float:left;position:relative;
        }
        #div1{
            width:200px;height:200px;background-color: red;position:absolute;left:50%;top:50%;margin-left:-100px;margin-top:-100px;
        }


        #method2{
            width:500px;height:500px;background-color:#eee;float:left;margin-left: 200px;position:relative;
        }
        #div2{
            width:200px;height:200px;background-color: yellow;left:50%;top:50%;position:absolute;transform:translate(-50%,-50%);
        }


        #method3{
            width:500px;height:500px;background-color:#eee;float:left;margin-left: 200px;position:relative;
        }
        #img{
            position: absolute;margin:auto;top: 0; left: 0; bottom: 0; right: 0;
        }


        #method4{
            width:500px;height:500px;background-color:#eee;float:left;margin-left: 200px;
            display:table;
        }
        #div4{
            display: table-cell;vertical-align: middle;
        }
        #inner{
            width:200px;height:200px;background-color: green;
        }


        #method5{
            width:500px;height:500px;background-color:#eee;float:left;margin-left: 20px;
            text-align: center;
        }
        #method5:after{
            content:'';height:100%;display: inline-block;vertical-align: middle;
        }
        #div5{
            width:200px;height:200px;background-color: blue;
            display:inline-block;vertical-align: middle;
        }


        #method6{
            width:500px;height:500px;background-color:#eee;float:left;margin-left: 20px;
            display:flex;  justify-content:center;  align-items: center;
        }
        #div6{
            width:200px;height:200px;background-color: orange;
        }
    </style>
</head>
<body>
    <div id="method1">
        知道div的宽高(负margin法)
        <div id="div1"></div>
    </div>
    <div id="method2">
        未知div的宽高（transform法）
        <div id="div2"></div>
    </div>
    <div id="method3">
        未知宽高的图片（绝对剧中法）
        <img id="img" src="../img/1027302145908.jpg" alt="">
    </div>
    <div id="method4">
        table方法
        <div id="div4">
            <div id="inner"></div>
        </div>
    </div>
    <div id="method5">
        <div>123123</div>
        <div id="div5" style="color:white">display:inline-block</div>
    </div>
    <div id="method6">
        <div id="div6" style="color:white">css3 flexbox方式</div>
    </div>
</body>