解读CSS布局之-水平垂直居中

地址：http://f2e.souche.com/blog/jie-du-cssbu-ju-zhi-shui-ping-chui-zhi-ju-zhong/
demo:http://codepen.io/tianzi77/pen/gpQBMN

新增加demo：http://codepen.io/tianzi77/pen/JdVyXV

利用display:table 以及transform2种方式实现水平垂直居中

随便写了几个小案列。

html：

    <h1>利用text-align和行高进行水平垂直居中</h1>
    <div class="outer">
        <div class="zhuangjia">
            <input type="text" placeholder="zhuangjia">
        </div>
    </div>

    <h1>利用50%＋margin进行居中</h1>
    <div class="inner">
        <div class="zj">
            <input type="text" placeholder="zhuangjia">
        </div>
    </div>

    <h1>利用定位进行居中</h1>
    <div class="inner1">
        <div class="zj1">
            <input type="text" placeholder="zhuangjia">
        </div>
    </div>

样式：

        h1 {
            text-align: center
        }

        .outer {
            text-align: center;
            width: 100%;
            height: 400px;
            line-height: 400px;
            border: 1px solid red;
            font-size: 0;
        }

        .zhuangjia {
            line-height: normal;
            vertical-align: middle;
            display: inline-block;
        }

        .inner {
            width: 700px;
            height: 700px;
            border: solid 1px red;
            position: relative;
        }

        .zj {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -75.5px;
            margin-top: -10.5px;
            width: 151px;
            height: 21px;
        }

        .inner1 {
            width: 700px;
            height: 700px;
            border: 1px solid red;
            position: relative;
        }

        .zj1 {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 151px;
            height: 21px;
        }

example：
http://codepen.io/hzxs1990225/full/RNRVZM