一、水平居中
行內(nèi)元素：
text-align: center
適用元素：文字，鏈接，及其其它inline或者inline-*類型元素（inline-block，inline-table，inline-flex）塊級元素：
對于塊狀元素（display:block）來說，我們需要將它的左右外邊距（即margin-left，margin-right）設(shè)置為auto，即可實(shí)現(xiàn)塊狀元素的居中多個(gè)塊級元素：
① 元素：display: inline-block;父元素text-align: center;
將元素的display屬性設(shè)置為inline-block，并且把父元素的text-align屬性設(shè)置為center即可實(shí)現(xiàn)
② 使用flexbox：
父元素display:flex; justify-content: center;
只需要把待處理的塊狀元素的父元素添加屬性display:flex及justify-content:center即可
二、垂直居中
單個(gè)行內(nèi)元素：
當(dāng)一個(gè)行內(nèi)元素，即inline，inline-*類型的元素需要居中的話，可以將它的height和line-height同時(shí)設(shè)置為父元素的高度即可實(shí)現(xiàn)垂直居中效果多行行內(nèi)元素：
組合使用display:table-cell和vertical-align:middle屬性來定義需要居中的元素的父容器元素生成效果已知高度的塊級元素：
將待居中元素設(shè)置為絕對定位，并且設(shè)置margin-top為居中元素高度一半的負(fù)值-
未知高度的塊級元素：
.item{ top: 50%; position: absolute; transform: translateY(-50%); /* 這里我們使用css3的transform來達(dá)到類似效果 */ }
使用transform屬性來垂直移動(dòng)來實(shí)現(xiàn)垂直居中。
三、水平垂直居中
已知高度和寬度的元素：
設(shè)置元素定位為absolute，并且設(shè)置top,left絕對值為50%，margin-top和margin-left為元素高度一半的負(fù)值即可未知高度和寬度的元素：
-
類似的
transform屬性來定義.item{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 使用table-cell:
在父元素中設(shè)置display: table-cell; vertical-align: middle; text-align:center;使用
box（以WebKit為例，其它所需兼容再添。注意瀏覽器支持情況Firefox 、Safari、Opera 以及 Chrome ）
display: -webkit-box; -webkit-box-align: center; -webkit-box-pack: center;
- 使用flex布局實(shí)現(xiàn)：
在父元素設(shè)置display: flex; justify-content:center; align-items: center; /* 注意這里需要設(shè)置高度來查看垂直居中效果 */
（注意瀏覽器支持情況Firefox 、Safari、Opera 以及 Chrome ）
*flex和box較適合移動(dòng)端以及不需要考慮低版本瀏覽器的開發(fā)。
