实现元素水平 + 垂直居中

元素水平居中，这个实现起来就很简单。
文字可以用text-align:center；
有宽度的块级元素可以用margin:0 auto;

那如果想要元素水平+ 垂直居中呢？要是元素的宽高还不确定呢？

1. 父元素：flex

flex这个东西简直就是一个神器...

我们给父元素设置flex相关属性：

display: flex;
justify-content: center;
align-items: center;

这个时候子元素就会在父盒子内部水平+垂直居中了。

2. 子元素：绝对定位 + margin

给子元素设置绝对定位，让子元素相对父元素向右、向下移动父元素宽高的50%，然后再用margin-top和margin-left的负值，往回拉子元素自己宽高的50%。

/* 给父元素设置： */
position: relative;


/* 给子元素设置： */

width: 100px;
height: 100px;
background-color: orange;

position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;

这个方法比较坑的一个点就是，你得知道子元素自己的宽高才行，不然margin值就控制不好子元素往回拉的距离。

3. 子元素：绝对定位 + transform 位移

transform的translate设置的百分比，是相对于子元素本身的，所以我们可以给子元素设置 -50% ，来解决上一个方法的坑。

/* 父元素还是加一个相对定位 */


/* 子元素设置一下属性 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

4. 子元素绝对定位 + 上下左右为0 + margin为auto

/* 父元素相对定位 */

/* 子元素设置绝对定位   上右下左都为0   margin为auto */

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
        
margin: auto;

这个方法思路还是比较新奇的。