05/5
2019
在网页里，有时候我们需要用定位把一个元素相对于另一个元素居中。一个常见的办法是先把元素的左上角定位到中间，然后用 margin 把元素中心点定位到中间。后来我看到了用 translate 替代 margin 的做法。
<body>
<div class="a"></div>
<style>
body {
position: relative;
height: 100vh;
}
.a {
width: 200px;
height: 200px;
background: #ddd;
position: absolute;
left: 50%;
top: 50%;
/* margin-left: -100px;
margin-top: -100px; */
transform: translate(-50%, -50%);
}
</style>
</body>
css 里注释掉的部分是传统做法。传统做法有个缺点：必须事先知道这个元素的宽高，这样才能精确的减去宽高宽高的一半。如果元素宽高是会变化的，这个方法就不准确了。
而 translate 的百分比是相对于元素自身宽高的，所以它总是能精确的减去 50% 的宽高，做到了自适应，非常舒服。
更新：
一个大坑：translate 当有元素的尺寸不是整数 px 时，会导致内容模糊。
好做法，学习了（づ￣3￣）づ╭❤～