元素水平垂直居中

一.行内／行内块状元素

水平居中：

在元素的父级➕text-align:center;

垂直居中：

1.设置父级的行高=高；height: 30px; line-height:30px;

2.css表格布局：父级设置display: table-cell; text-align: center; vertical-align: middle;（垂直居中）

二.块元素

水平居中：

1.元素本身➕margin: 0 auto;

2.本身设置display：inline-block； 父级text-align:center;

3.css表格布局：父级设置display: table-cell; text-align: center; vertical-align: middle;（垂直居中）；

　此时的父级若要水平居中，则需在爷爷级➕display: table; margin: 0 auto;

垂直居中：

1.css表格布局：父级设置display: table-cell; text-align: center; vertical-align: middle;（垂直居中）

2.已知高度的元素：使用绝对定位,把元素直接定到页面的一半,然后把元素拉回其大小的一半,即可实现垂直居中。（水平居中可同理）

　.testDiv{ width: 100px; height: 100px; position: absolute; top:50%; margin-top:-50px; } 

3.未知高度：同2，使用绝对定位。记得给父加position: relative 否则就相对位置参照的就是页面整体。

　position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);换成下面以考虑到浏览器兼容性

　浏览器兼容问题：-webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);transform: translate(-50%,-50%);

3.父块使用display:flex属性,子块margin：auto；自适应即可实现水平垂直居中；或者只动父级display: flex; justify-content: center; align-items: center;即可实现。

 

！！组合使用display:table-cell和vertical-align、text-align，使父元素内的所有行内元素水平垂直居中（内部div设置display:inline-block即可）

！！父块使用display:flex属性,子块margin：auto；自适应即可实现行内或者块级等任意元素水平垂直居中