实现div垂直水平居中的11种方法
<div class="father"><div class="son"></div></div>
1.弹性布局flex
第一种 父级对自己元素进行垂直居中，居中属性只要定义在父元素中即可
.father{width: 200px;height: 200px;background: #000; display: flex;flex-direction: row;justify-content: center;//让子元素水平居中align-items: center;//让子元素垂直居中}.son{width: 100px;height: 100px;background: red; }
2.弹性盒布局flex 第二种 让子元素用外边距自动顶开
.father{width: 200px;height: 200px;background: #000;display: flex;}.son{width: 100px;height: 100px;background: red; margin: auto;}
3.弹性盒布局 子元素脱离父级的align-items属性
.father {width: 200px;height: 200px;background: #000;display: flex;}.son {width: 100px;height: 100px;background: red;align-self: center; margin: auto;}
4.绝对定位-父相子绝-第一种四边定位为0，margin-auto
.father1 {width: 200px;height: 200px;background: #000;position: relative;}.son1 {width: 100px;height: 100px;background: red;position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;}
5.绝对定位-父相子绝-相邻两个定位+margin负值
.father2 {width: 200px;height: 200px;background: #000;position: relative;}.son2 {width: 100px;height: 100px;background: red;position: absolute;left: 50%;top: 50%;margin-left: -50px;margin-top: -50px;}
6.绝对定位-父相子绝-已知父子宽高直接计算定位
.father3 {width: 200px;height: 200px;background: #000;position: relative;}.son3 {width: 100px;height: 100px;background: red;position: absolute;top: 50px;left: 50px;}
7.父相子绝-子元素transfrom属性
.father {width: 200px;height: 200px;background: #000;position: relative;}.son {width: 100px;height: 100px;background: red;position: absolute;left: 50%;//向右移动50%top: 50%; //向上移动50%//此时子元素的左下直角在父元素的中心点中，接下来需要把子元素的中心点移动到父元素的中心点位置中transform: translate(-50%, -50%);//变形，子元素向左移动自身宽度的50%负值，向上移动自身高度的50%,向左向右移动则为正值}<!-- translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中.。 --><!-- 当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置 translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。 -->
8.利用table特征，只对表格有效
*在子元素没有设置宽高度和数量时使用 注意：table-cell不感知margin，在父元素上设置table-row等属性，也会使其不感知height。
.father{width: 200px;height: 200px;background: #000;display: table; margin: 40px;}.son{width: 100px;height: 100px;background: red; margin:25% auto;}
9.利用table-cell属性
注意： 目前IE8+以及其他现代浏览器都是支持此属性的但是IE6/7 不可以
<!-- 适用场景：IE6\7不兼容 --><!-- display 为 table-cell，激活 vertical-align 属性，display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。使用场景：容器内容居中，并不想脱离文档流 优点：。好处是不用添加多余的无意义的标签，1.内容溢出会将父元素撑开。2.内容宽高，容器宽高均不用care。3兼容IE9以下缺点：1.不适用于Modal弹层这种盖住页面内容的布局 由于display:table-cell的原因，它的兼容性不是很好，不兼容 IE6、7。-->
.father {width: 200px;height: 200px;background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);display: table-cell;vertical-align: middle;//使子元素垂直居中//vertical-align 只影响inline或者inline-block的，所以div.child设置vertical-align就能居中了。text-align: center;//使子元素水平居中}.son {display: inline-block;width: 100px;height: 100px;background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);}或者.father {width: 200px;height: 200px;background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);display: table-cell;vertical-align: middle; }.son { width: 100px;height: 100px;margin: auto;background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);}
10.父相子绝+calc()动态计算实现水平垂直居中
.father {position: relative;border: 1px solid #f40;background-color: #f30;width: 80vw;height: 80vh;}.son {position: absolute;width: 30vw;height: 30vh;background-color: #ff0;left: calc(50% - 15vw);top: calc(50% - 15vh);}
11.使用grid
.father{background: #000;width: 200px;height: 200px;display: grid; }.son{background: red;justify-self: center; //水平居中/* align-self: center; *//* margin: auto; */width: 100px;height: 100px;/* 通过子层的align-self和justify-self来做到垂直居中。 */}
