盒子佈局居中實現

水平居中問題

1. 使用inline-block 和 text-align實現

   .parent{text-align: center;} .child{display: inline-block;}

2. 使用margin:0 auto來實現

   .child{width: 200px; margin: 0 auto;}

3. 使用table實現

   .child{display: table; margin: 0 auto;}

4. 使用絕對定位實現

   .parent{position:relative;} .child{position:absolute; left:50%; transform:translate(-50%);} /或者實用margin-left的負值爲盒子寬度的一半也能夠實現，不過這樣就必須知道盒子的寬度，但兼容性好/

5.實用flex佈局實現

/*第一種方法*/
.parent{display:flex; justify-content:center;}
/*第二種方法*/
.parent{display:flex;}
.child{margin:0 auto;}

display:box;不兼容問題解決，咱們須要把Flexbox舊的語法、中間過渡語法和最新的語法混在一塊兒使用，在這裏他們的順序顯得很是重要。「display」屬性自己並不添加任何瀏覽器前綴，咱們須要確保咱們老語法不要覆蓋新語法讓瀏覽器（可能老是會）同時支持。

.parent {
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.child {
	 -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
	 -moz-box-flex: 1;         /* OLD - Firefox 19- */
	 width: 20%;               /* For old syntax, otherwise collapses. */
	 -webkit-flex: 1;          /* Chrome */
	 -ms-flex: 1;              /* IE 10 */
	 flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

垂直居中

1.vertical-algin:middle

只有一個元素屬於inline或是inline-block（table-cell也能夠理解爲inline-block水平）水平，其身上的vertical-align屬性纔會起做用。==在使用vertical-align的時候==，因爲對齊的基線是用行高的基線做爲標記，==故須要設置line-height或設置display:table-cell;==

/*第一種方法*/
.parent{display:table-cell;vertical-align:middle;height:20px;}
/*第二種方法*/
.parent{display:inline-block;vertical-align:middle;line-height:20px;}

2. 使用絕對定位

   .parent{position:relative;} .child{positon:absolute; top:50%; transform:translate(0,-50%);}

3. 用flex實現

   .parent{display:flex; align-items:center;}