css中transform translate元素居中

转载：css中的“ transform: translate(-50%, -50%)； “的意思_transform: translatex(-50%);-CSDN博客

这种特定的用法（translate(-50%, -50%)）经常和 position: absolute; top: 50%; left: 50%; 一起使用，用于将元素居中。

.item {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

这里的原理是，首先通过 top: 50%; left: 50%; 将元素的左上角移到其容器的中心，然后再通过 translate(-50%, -50%) 向左和向上移动元素的一半宽度和一半高度，以此达到完全居中的效果。