css3使用translate实现水平、垂直方向居中效果

六月初六月初 CSS 2023-05-18 10:07:27

对指定元素进行水平方向、垂直方向剧中展示，在大多数效果中都是常见应用。文中介绍基于css3属性transform实现未知div宽高，实现水平、垂直居中处理。


水平、垂直居中完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="test">
			<div class="box">六月初博客站</div>
		</div>
		<style>
			.test{
				height: 200px;
				width: 400px;
				border: 1px solid #000;
				position: relative;
			}
			.box{
				padding: 20px 40px;
				border: 1px solid #f00;
				position: absolute;
				left: 50%;
				top: 50%;
				transform:translate(-50%,-50%)
			}
		</style>
	</body>
</html>

代码解析：

    Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

    文中应用transform属性的位移效果，即translate。

    语法：transform:translate(x,y)

    x即x轴方向移动，可使用固定像素如50px，也可以使用百分比如50%

    y即y轴方向移动，同样可使用固定像素如50px，也可以使用百分比50%

    注：这里的移动百分比，相对于div本身的百分比进行移动

关于x轴、y轴正负值解析：

    x轴：值为正数，即红色箭头向右移动指定像素或百分比。

    x轴：值为负数，即绿色箭头向左移动指定像素或百分比。

    y轴：值为正数，即红色箭头向上移动指定像素或百分比。

    y轴：值为负数，即绿色箭头向下移动指定像素或百分比。


六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！