css功能实现参考手册

定位：

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;

后续不断更新...