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

二、 居于边缘

.parent{
  z-index: 9999;   //保证界面里层级显示最高
  position: fixed;   配合left:0;(居左)    top：0；（居顶部）其他类推
 }