元素水平垂直居中

一.行內／行內塊狀元素

水平居中：

在元素的父級➕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；自適應便可實現行內或者塊級等任意元素水平垂直居中