使用 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%)
推荐阅读
- 由浅入深理解AOP
- 【译】20个更有效地使用谷歌搜索的技巧
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus|MybatisPlus LambdaQueryWrapper使用int默认值的坑及解决
- MybatisPlus使用queryWrapper如何实现复杂查询
- iOS中的Block
- Linux下面如何查看tomcat已经使用多少线程
- 使用composer自动加载类文件
- android|android studio中ndk的使用
- 昨晚做春梦了吗（教给你怎么做最厉害的！梦里还有维多利亚的天使）