transform定位

最新推荐文章于 2025-05-08 12:37:53 发布

原创最新推荐文章于 2025-05-08 12:37:53 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

以前我们使用居中的时候都是使用

margin-top 和margin-bottom

这种当我们给宽度和高度定死的时候是能用的例如：

width:100px;

height:100px;

但是如果宽高是百分比呢？

所以这里我推荐使用transform当我们的宽高不知道的时候我们就能使用它

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.center{
			position: absolute;
			top: 50%;
			left: 50%;
			width:40%;
			height:30%;
			text-align:center;
			background:#393;
			color:#fff;
			transform: translate(-50%, -50%);
		}
	</style>
</head>
<body>
<div class="center">fasfsafasfsaa</div>
</body>
</html>