css3垂直居中的一种实现方法

最新推荐文章于 2025-07-12 01:05:06 发布

hellochenlu

最新推荐文章于 2025-07-12 01:05:06 发布

阅读量754

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/hellochenlu/article/details/72726356

css 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用CSS中的translate属性配合top和left属性实现元素的精确居中，并对比了translate与position的区别，强调translate在动画制作中的优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。

1. top：50%，left：50%，是将色块的左上角定位在了屏幕的中央，但是，整体并不在中央；

2. translate的百分比是根据自身的宽度和高度来定的，translate(-50%,-50%) 配合 top：50%，left：50% 实现了居中

以下是在网上查找到的关于translate和position：

相同点：两者都是相对于本身移动位置

区别：

1、当元素原来已经有position:absolute的时候，这时候你想相对于本身移动，可以使用translate

2、做动画的时候translate更适合，不会引起页面的重排和重绘

3、关于transform类的，可以使用GPU加速，提高浏览器的性能？总之：transform更适用于动画

源代码：

<!DOCTYPE html>
<html>
	<head> 
		<meta charset="utf-8">
		<title>变形与动画</title>
		<link href="style.css" rel="stylesheet" type="text/css">
		<style type="text/css">
			.wrapper {
			  	padding: 20px;
			  	background:orange;
			  	color:#fff;
			  	position:absolute;
			  	top:50%;
			  	left:50%;
			  	border-radius: 5px;
			  	-webkit-transform:translate(-50%,-50%);
                -moz-transform:translate(-50%,-50%);
                transform:translate(-50%,-50%);
			}
		</style>

	</head> 
	<body>
		<div class="wrapper">
		我不知道我的宽度和高是多少，我要实现水平垂直居中    
		</div>
	</body>
</html>