这次讲的是布局中的居中布局，分为水平居中、垂直居中、水平垂直居中三个部分。html的代码均为以下相同的代码。
<div class="parent">
<div class="child">Demo</div>
</div>
要求里面的容器宽高是不确定的，外面的容器宽高也是不确定的，实现这三种布局的方法。
水平居中布局
（1）inline-block+text-align
这种方法IE6、IE7不支持inline-block，所以改良后的代码如下，兼容IE6、IE7。
.parent{text-align:center;}
.child{display:inline-block;*display:inline;*zoom:1;}
这种布局的缺点是，child里的Demo文字会因为设置了text-align:center而居中，而如果希望child里文字不居中，可以在child里加一句：text-align:left;
（2）table+margin
.child{margin: 0 auto;display: table;}
设置了display:table以后，宽高跟着内容走，IE8以下不支持display:table，处理办法是将布局换成table布局。
（3）absolute+transform
这种方法IE8以及以下不支持transform，别的浏览器需要加私有前缀。
.parent{position: relative;}
.child{
position: absolute;
left:50%;
-ms-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-o-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
transform:translateX(-50%);
}
（4）flex+justify-content
这种方法，IE8以及以下不支持。
.parent{display: flex;justify-content:center;}
或者也可以这样写：
.parent{display: flex;}
.child{margin: 0 auto;}
垂直居中布局
（1）table-cell+vertical-align
.parent{display:table-cell;vertical-align:middle;}
这种方法IE6、IE7不支持table-cell,处理办法是把html的布局换成单元格布局。
（2）absolute+transform
这种方法IE8以及以下不支持transform，其他浏览器需要加私有前缀。
.parent{position: relative;}
.child{
position: absolute;
top:50%;
-ms-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-o-transform:translateY(-50%);
-webkit-transform:translateY(-50%);
transform:translateY(-50%);
}
（3）flex+align-items
这种方法IE8以及以下不支持。
.parent{display:flex;align-items:center;}
水平垂直居中布局
（1）inline-block+text-align+table-cell+vertical-align
.parent{text-align:center;display:table-cell;vertical-align:middle;}
.child{display:inline-block;*display:inline;*zoom:1;}
这种方法IE6、IE7不支持table-cell,处理办法是把html的布局换成单元格布局。
（2）absolute+transform
这种方法IE8以及以下不支持transform，别的浏览器需要加私有前缀。
.parent{position: relative;}
.child{
position: absolute;
top:50%;
left:50%;
ms-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
（3）flex+justify-content+align-items
这种方法IE8以及以下不支持。
.parent{display:flex;align-items:center;justify-content:center;}
