通过transform实现元素居中

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

我的哥哥呦

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

阅读量4.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： H5C3 文章标签： transform 居中

本文链接：https://blog.youkuaiyun.com/qq_20497071/article/details/97611766

H5C3 专栏收录该内容

52 篇文章

订阅专栏

本文介绍如何使用CSS在圆形背景中精确居中放置一个矩形，通过transform属性实现元素的居中显示，适用于前端网页布局设计。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		.box{
			width: 400px;
			height: 400px;
			border-radius: 200px;
			background-color: #ccc;
			margin: 100px auto;
			position: relative;
		}
		.rec{
			width: 200px;
			height: 200px;
			position: absolute;
			background-color: red;
			/* 定位的百分比参照父容器 */
			left: 50%;
			top: 50%;
			/* 使用transform实现元素居中,百分比参照元素本身的宽高 */
			transform: translate(-50%,-50%);
		}
	</style>
</body>
	<div class="box">
		<div class="rec"></div>
	</div>
</html>