这次讲的是布局中的居中布局，分为水平居中、垂直居中、水平垂直居中三个部分。html的代码均为以下相同的代码。
|
1 2 3 |
<div class="parent"> <div class="child">Demo</div> </div> |
要求里面的容器宽高是不确定的，外面的容器宽高也是不确定的，实现这三种布局的方法。
（1）inline-block+text-align
这种方法IE6、IE7不支持inline-block，所以改良后的代码如下，兼容IE6、IE7。
|
1 2 |
.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
|
1 |
.child{margin: 0 auto;display: table;} |
设置了display:table以后，宽高跟着内容走，IE8以下不支持display:table，处理办法是将布局换成table布局。
（3）absolute+transform
这种方法IE8以及以下不支持transform，别的浏览器需要加私有前缀。
|
1 2 3 4 5 6 7 8 9 10 |
.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以及以下不支持。
|
1 |
.parent{display: flex;justify-content:center;} |
或者也可以这样写：
|
1 2 |
.parent{display: flex;} .child{margin: 0 auto;} |
（1）table-cell+vertical-align
|
1 |
.parent{display:table-cell;vertical-align:middle;} |
这种方法IE6、IE7不支持table-cell,处理办法是把html的布局换成单元格布局。
（2）absolute+transform
这种方法IE8以及以下不支持transform，其他浏览器需要加私有前缀。
|
1 2 3 4 5 6 7 8 9 10 |
.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以及以下不支持。
|
1 |
.parent{display:flex;align-items:center;} |
（1）inline-block+text-align+table-cell+vertical-align
|
1 2 |
.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，别的浏览器需要加私有前缀。
|
1 2 3 4 5 6 7 8 9 10 11 |
.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以及以下不支持。
|
1 |
.parent{display:flex;align-items:center;justify-content:center;} |