最全元素水平垂直居中方法

1.水平居中

1.1已知寬度塊元素寬度 :

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

1.2文本內容居中:

.parent{text-align:center;}

1.3通過表格:

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

1.4已知寬度,通過設置position:absolute,margin-left為寬度的負一半

.parent{position:relative;}
.child{position:absolute;left:50%;width:150px;margin-left:-75px;}

1.5未知寬度,通過設置position:absolute

.parent{position:relative;}
.child{position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);}

1.6使用flex佈局實現（相容性不好，感覺有點變成浮動的效果，不在文檔流）

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

2.垂直居中

2.1文本垂直居中 .child{height:20px;line-height:20px}

2.2vertial-align:middle;

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

2.3未知高度，設置position:absolute

    .parent{position:relative;}
    .child{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);}

2.4已知高度，設置position:absolute,margin-top為高度的負一半

    .parent{position:relative;}
    .child{position:absolute;top:50%;height:150px;margin-top:-75px;}

2.5使用flex佈局實現

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