一、居中显示
备注：其中的parent为上一层或者父布局；child为当前div
1.1 水平居中

已知宽度块元素宽度 :
.child{width:1000px;margin:0 auto;}
1
文本内容居中:
.parent{text-align:center;}
1
通过表格:
.child{display:table;margin:0 auto;}
1
已知宽度,通过设置position:absolute（定位显示）
.parent{position:relative;}
.child{position:absolute;left:50%;width:150px;margin-left:-75px;}
1
2
未知宽度,通过设置position:absolute（定位显示）
.parent{position:relative;}
.child{position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);}

1
2
3
使用flex布局实现
.parent{display:flex;justify-content:center;} ------- 父布局里设置，全部div居中显示
.parent{display:flex;}.child{margin:0 auto;} -------- 自身div设置
1
2
1.2 垂直居中

文本垂直居中
.child{height:20px;line-height:20px}
1
vertial-align:middle;的使用
第一种方法：.parent{display:table-cell;vertical-align:middle;height:20px;}
第二种方法：.parent{display:inline-block;vertical-align:middle;line-height:20px;}
1
2
未知高度，设置position:absolute
.parent{position:relative;}
.child{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);}
1
2
已知高度，设置position:absolute,margin-top为高度的负一半
.parent{position:relative;}
.child{position:absolute;top:50%;height:150px;margin-top:-75px;}
1
2
使用flex布局实现
.parent{display:flex;align-items:center;}
1
二、 居于边缘

.parent{
z-index: 9999; //保证界面里层级显示最高
position: fixed; 配合left:0;(居左) top：0；（居顶部）其他类推
}
————————————————
版权声明：本文为CSDN博主「julystroy」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/julystroy/article/details/96493615