CSS居中

内容居中：text-align:center;这种用法需要定义在父级元素上面。然后他的子元素的内容就全部居中了。

div居中1：margin:0 auto;

div居中2：left: 50%;margin-left: -60px;这种用法需要父级元素的position:relative; 然后子元素的position:absolute;绝对定位。子元素的宽度要设置，比如120px，这时候再向左偏移他一半的宽度就好了。

1.使用绝对定位垂直和水平居中：

<style>
        .container {
            border: 1px solid red;
            position: relative;
            height: 500px;
        }

        .absolute_center {
            position: absolute;
            width: 200px;
            height: 200px;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            background: #518fca;
            resize: both; /*用于设置了所有除overflow为visible的元素*/
            overflow: auto;
        }
    </style>

绝对对位原理：元素在过度受限情况下，将margin设置为auto，浏览器会重算margin的值，过度受限指的是同时设置top/bottom与height或者left/right与width。html代码：

<div class="container">
        <div class="absolute_center">
            生活不能等待别人来安排，要自已去争取和奋斗；<br>
            而不论其结果是喜是悲，但可以慰藉的是，你总不枉在这世界上活了一场。<br>
            有了这样的认识，你就会珍重生活，而不会玩世不恭；同时，也会给人自身注入一种强大的内在力量。
        </div>
    </div>

使用绝对定位要求元素必须设置明确高度。内容超过元素高度时需要设置overflow决定滚动条的出现

优点：支持响应式，只有这种方法在resize之后仍然垂直居中

缺点：没有显式设置overflow时，内容超过元素高度时会溢出，没有滚动条

2.负marginTop方式

已知元素高度后，使用绝对定位将top设置为50%，margin-top设置为内容高度的一半(height + padding) / 2；内容超过元素高度时需要设置overflow决定滚动条的出现

原理：top：50%元素上边界位于包含框中点，设置负外边界使得元素垂直中心与包含框中心重合；水平居中同样的道理，使用margin-left负值（元素宽度的一半）。

.negative_margin_top {
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            margin: auto;
            margin-top: -100px;
            width: 200px;
            height: 200px;
            background: #518fca;
        }

优点：代码量少、浏览器兼容性高支持ie6 ie7

缺点：不支持响应式(不能使用百分比、min/max-width)

3.table-cell方式

原理：利用表布局特点，vertical-align设置为middle后，单元格中内容中间与所在行中间对齐

.container {
            display: table;
            border: 1px solid red;
            height: 500px;
            width: 100%;
        }

        .absolute_center {
            display: table-cell;
            text-align: center;
            background: #518fca;
            vertical-align: middle;
        }

优点：支持任意内容的可变高度、支持响应式

缺点：每一个需要垂直居中的元素都会需要加上额外标签（需要table、table-cell两个额外元素）

4.弹性盒式布局

.is-Flexbox {

display: -webkit-box;

display: -moz-box;

display: -ms-flexbox;

display: -webkit-box;

display: flex;

align-items: center;

justify-content: center;

text-align: center;

border: 1px solid red;

            height:500px;
        }

<div class="is-Flexbox">
            既要脚踏实地于现实生活，又要不时跳出现实到理想的高台上张望一眼。<br>
    </div>

优点：真正的垂直居中、水平居中布局

缺点：ie11才开始支持弹性布局

来源：http://www.cnblogs.com/dojo-lzz/p/4419596.html

http://www.jqhtml.com/6435.html