Vue css各種居中顯示

一、居中顯示
備註：其中的parent爲上一層或者父佈局；child爲當前div
1.1 水平居中

• 已知寬度塊元素寬度 :

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

• 文本內容居中:

.parent{text-align:center;}

• 通過表格:

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

• 已知寬度,通過設置position:absolute（定位顯示）

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

• 未知寬度,通過設置position:absolute（定位顯示）

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

• 使用flex佈局實現

.parent{display:flex;justify-content:center;}    -------  父佈局裏設置，全部div居中顯示
.parent{display:flex;}.child{margin:0 auto;}     -------- 自身div設置

1.2 垂直居中

• 文本垂直居中

.child{height:20px;line-height:20px}

• vertial-align:middle;的使用

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

• 未知高度，設置position:absolute

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

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

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

• 使用flex佈局實現

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