div水平垂直居中小集锦以及demo

1、div水平垂直居中的方法
（1）绝对定位方法：不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;）div{position:absolute;left:50%;top:50%;transform:tranlate(-50%,-50%);}
(2)绝对定位方法：确定了当前div的宽度，margin值为当前div宽度一半的负值
div{width:xpx；height:ypx;position:absolute;left:50%;top:50%;margin-left:-x/2px;margin-right:-y/2px;}
(3)绝对定位方法：绝对定位下top left right bottom都设置为0
div{width:xpx;height:ypx;position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;}
(4)flex布局方法

child

.box{ height:800px; -webkit-display:flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center; border:1px solid #ccc; } div.child{ width:xpx; height:ypx; } (5)table-cell实现水平垂直居中: table-cell middle center组合使用 (6)绝对定位：calc() 函数动态计算实现水平垂直居中

demo见链接：https://pan.baidu.com/s/1Wf9QjobouX7OIbfIlfScDw
提取码：2aak