一.定位:Position

1.静态定位：position:static；（默认）

2.相对定位：relative,
通过对top,bottom,left,right定值来确定元素的最终位置

3.绝对定位：absolute
配合使用top，bottom，left和right

该元素依据父级元素设置了position作为参考点定位，如果父元素没有设置定位，那就找父亲的父亲，一层一层的往上找，直到找到设置了position属性的元素（设置的position只要不是为static就可以，至于是absolute或relative没有要求），如果父级、祖父级、曾祖父及都没设置，那就以网页窗口为参照（左上角起始位）。一般情况下，都是有参考，又为了不改变布局，所以给父级或祖父级设置相对定位。（因为相对定位，占据原来位置，不会改变布局）

4.固定定位：position:fixed
与绝对定位的工作方式完全相同
区别是固定定位元素相对于浏览器视口本身

堆叠顺序
z-index 值影响定位元素位于该轴上的位置；正值将它们移动到堆栈上方，负值将它们向下移动到堆栈中。默认情况下，定位的元素都具有z-index为auto，实际上为0，值越大级别越高，越靠上。

Flex布局
参考文章：Flex布局详解

对齐方式：
水平居中：
1.行内元素的水平居中：

.parent{
text-align: center;
}
.child{
display: inline-block;
}

2.块状元素的水平居中（定宽）：

.child{
         width: 200px;
         margin: 0 auto;
     }

垂直居中
前提：父级元素是盒子容器且高度固定
1.子元素是行内元素，则高度是由其内容撑开的，设定父元素的inline-height为其高度。
2.子元素是块状元素且子元素的高度没有设定

.parent{
display:table-cell;
vertical-align:middle;
text-align:center;
}

3.子元素是块级元素且高度已经设定,计算子元素的margin-top/margin-bottom

水平+垂直居中：

//定位1
①.parent{
            position: relative;
        } 
   .child{
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
//定位2
②.parent{
            position: relative;
        } 
   .child{
            position: absolute;
            top:0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
//定位3
③ .parent{
            display: flex;
            justify-content: center;
            align-items: center;
        }
    .child{
            position: absolute;
     }

//定位4
④<script>
        let HTML = document.documentElement,
            winW = HTML.clientWidth, //定义父级元素的宽和高
            winH = HTML.clientHeight,
            boxW = box.offsetWidth, //定义子级元素的宽和高
            boxH = box.offsetHeight;
        box.style.position = "absolute"; //定义子级元素的定位
        box.style.left = (winW-boxW) / 2 + 'px';
        box.style.top = (winH-boxH) / 2 + 'px';
        通过写js来布局box，使其居中
    </script> 

若子元素是图像，可不使用table-cell，而是其父元素用行高替代高度，且字体大小设为0。子元素本身设置vertical-align:middle

<div class="parent" style="background-color: gray; width:200px; ">
  <img class="child" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" width="50%" alt="test">
</div>  

<style>
.parent{
    text-align: center;
    line-height: 100px;
    font-size: 0;
}
.child{
    vertical-align: middle;
}
</style>