Debug-026-垂直水平居中实现方式（1）-CSDN博客

本文链接：https://blog.csdn.net/LM0916/article/details/141848912

效果：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			.qwer{
			  position: absolute;
			  top: 50%;
			  left: 50%;
			  z-index: 999;   //层级
			  margin: 0 !important;
			  background: violet;
			  transform: translate(-50%, -50%); 
			}
		</style>
		
	</head>
	<body>
		<div class="qwer">111</div>
	</body>
</html>

补充：transform这个属性还是很强大的，可以支持元素的平移、旋转，放缩。

平移（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）

x轴正数向右，y轴正数向下，z轴正数指向屏幕面前的我们

并非所有的盒子都可以进行transform的转换(通常行内级元素不能进行形变)

举例：

（1）transform: translate(-100px, 80px); /* 图片平移向左100px,向下80px*/

transform: translate(50%, 50%); /* 图片向右平移自身的50%,向下80px平移自身的50%*/

百分比： translate函数的值为百分比是相对于自身的；如果设置的x位移，那么参考的是自身的宽度；如果设置的y:;位移，那么参考的是自身的高度

（2）transform: scale(2, 3); /* 将方块在 X 轴上缩放 2 倍，Y 轴上缩放 3 倍 */
（3）transform: rotate(-180deg); /* 旋转 180 度 */

（4）transform: skew(30deg, -15deg); /* 在 X 轴上倾斜 30 度，在 Y 轴上倾斜 -15 度 */

项目中应用：全局实现el-dialog弹窗的垂直水平居中