简单总结position定位和元素水平垂直居中

position
position的属性值共有四个常用的：relative、absolute、fixed、static。
首先普及一下文档流的知识：显示元素对象在窗口排列时所占用的位置，自上而下，从左到右。脱离文档流会影响其他元素的位置。

relative：相对定位，不脱离文档流，在文档流原先的位置进行位移。
absolute:绝对定位，脱离文档流，相对于最近的且不为static的父元素进行定位，把父级当成参考物。无父级则相对于body定位。（body和浏览器窗口不是同一个概念，比如body可以设置宽高和边距）
fixed:固定定位，脱离文档流，相对于浏览器窗口定位，不随滚动条滚动而改变位置。
static:默认值，常用到的top、left、bottom、right会失效。

水平垂直居中
常用的四种元素水平垂直居中的方法：
a.父级相对定位，自级绝对定位

div{
    position:relative;
}
p{
    position:absolute;
    width:100px;
    height:100px;
    left:50%;
    top:50%;
    margin-left:-50px;   //这两行代码也可以替换成
    margin-top:-50px;    //transform:translate(-50%,-50%);
}

b.父级display:flex，子级margin:auto

div{
     display:flex;
}
p{
    margin:auto;
}

c.flex布局

div{
    display:flex;
    justify-content:center;   //主轴方向水平居中  
    align-items:center;        //交叉轴垂直居中  
}

d.定位+margin:auto法

div{
    position:relative;
    width: 100px;
    height: 100px;
}
p{
    width: 50px;
    height: 50px;
    position:absolute;
    margin:auto;
    top:0;
    left:0;
    right:0;
    bottom:0
}