saber酱的抱枕

努力变强

05/5
05:35
学习

使用 CSS 3 的 translate 帮助元素居中

在网页里,有时候我们需要用定位把一个元素相对于另一个元素居中。一个常见的办法是先把元素的左上角定位到中间,然后用 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% 的宽高,做到了自适应,非常舒服。

使用 CSS 3 的 translate 帮助元素居中