网易微专业之《前端工程师》学习笔记（20）-水平垂直居中布局

这次讲的是布局中的居中布局，分为水平居中、垂直居中、水平垂直居中三个部分。html的代码均为以下相同的代码。

    
Demo

要求里面的容器宽高是不确定的，外面的容器宽高也是不确定的，实现这三种布局的方法。

水平居中布局

（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;}