使用 transform 使大小未知的元素居中

1.水平居中

• 下面举一个例子，父元素里面有一个子元素
• 子元素相对于父元素定位时，如果不写 left 和 top ，默认定位在父元素的左上角

• 子元素加上 left:50% 之后，此时的 50% 是指父元素宽度的 50%，也就是 100px，也就是子元素以它自己的左边为基准，平移了 100px 的距离

• 因为是以子元素的左边为基准，不算是完全的水平居中，需要再让子元素向左平移一丢丢(子元素宽度一半的距离)
• 如果前期不知道子元素的宽度，就可以用 transform 的 translate 属性了
• transform 里面的百分比全都是相对于子元素本身来说的，要跟上面 left 的 50% 区分开
• transform:translateX(-50%); 意思就是，子元素向左平移了一段距离，这个距离是自己宽度的一半
• 上述操作相当于，子元素先向右移动了父元素的一半，又向左移动了自己的一半，实现了水平居中

2.垂直居中

• 垂直居中同理，给子元素加上 top:50%，表示，以子元素最上面为基准，平移了 100px 的距离
• 然后再用transform平移回来，实现垂直居中

3.水平垂直居中

• 水平和垂直方向都需要居中的时候，需要注意，不能 translateX 和 translateY 一起用。会被覆盖

• 需要用 translate(x,y) 属性，即 translate(-50%,-50%)