盒子布局居中实现

水平居中问题

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