共计 547 个字符，预计需要花费 2 分钟才能阅读完成。
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%)
正文完