定位：
| fixed | 生成固定定位的元素，相对于浏览器窗口进行定位。 |
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 |
| relative | 生成相对定位的元素，相对于其正常位置进行定位。正常位置：static |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
1. 水平居中
margin-left:auto;
margin-right:auto;可以通过修改margin-top/margin-bottom 改变上下外边距。
实例：
效果：
2. 垂直居中
垂直居中之前，显然首先我们需要对该元素的父元素设置高度值（百分比高度的前提是父元素具有高度）
父元素：
height: 500px;然后对该元素进行如下设置：
position: relative;
top: 50%;
transform: translateY(-50%);
效果：
3. flex实现水平与垂直居中
弹性盒子实现水平居中与垂直居中：对父元素进行如下设置，其中align-items定义flex子元素在flex容器的当前行的垂直方向上的对齐方式。justify-cotentflex子元素在flex容器的当前行的水平方向上的对齐方式。
display: flex;
align-items: center;
justify-content: center;后续不断更新...
