一、四种定位方式(粘性定位除外)：

静态定位、绝对定位、相对定位、固定定位

二、是否脱离标准流

1 不脱离标准流：

静态定位
相对定位

1.1 不脱离标准流的水平居中

margin: 0 auto;
/*或者*/
margin: auto;

此处以静态定位为例，相对定位亦是

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.center {
				position: static;/* 静态定位 */
				margin: 0 auto;/* 或者使用margin: auto; */
				width: 100px;
				height: 100px;
				background-color: #00FFFF;
			}
		</style>
	</head>
	<body>
		<div class="center">
			
		</div>
	</body>
</html>

在这里插入图片描述

1.2 不脱离标准流的垂直居中

可以通过margin-top进行向下偏移，但是较难实现居中

2 脱离标准流：

绝对定位
固定定位

2.1 脱离标准流的水平居中

left: 50%;
margin-left: 宽度一半取负数;

也可以

right: 50%;
margin-right: 宽度一半取负数;

这里以绝对定位为例，固定定位相同

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.center {
				position: absolute;/* 绝对定位 */
				width: 100px;
				height: 100px;
				background-color: #00FFFF;
				left: 50%;/*按照父元素为基准，左侧向右偏移一半*/
				margin-left: -50px;/*由于自身有宽度，反向偏移自身宽度的一半*/
				
			}
		</style>
	</head>
	<body>
		<div class="center">
			 
		</div>
	</body>
</html>

在这里插入图片描述

2.2 脱离标准流的垂直居中

与水平居中类似，可通过偏移加上margin来进行处理
这里以absolute为例，fixed相同

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.verticalCenter {
				position: absolute;
				width: 100px;
				height: 100px;
				margin-top: -50px;
				top:50%;
				background-color: black;
			}
		</style>
	</head>
	<body>
		<div class="verticalCenter"></div>
	</body>
</html>

在这里插入图片描述

# css3
Logo
天工造物局

北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台

更多推荐

Understand Anything 多智能体知识图谱管线：从代码扫描到可交互 Dashboard 的实现解析

本文以 Understand Anything 的官方文档为主线，系统拆解它如何用一条「Tree-sitter 静态分析 + LLM 语义理解」的多智能体管线，把任意代码库 / 知识库 / 文档转换成可探索、可检索、可问答的知识图谱，并落到一个可交互的 Web Dashboard。读完你应能掌握：如何安装并在 Claude Code / Codex / Cursor / Copilot / Gem

avatar 天工造物局

graphify 视频音视频转写全流程解析：从 detect 结果到知识图谱文档的 Step 2.5

graphify 的核心能力是把任意语料（代码、文档、PDF、图片）转化为可查询的知识图谱，而视频与音频文件无法被直接阅读，必须先把它们转写成文本。本文围绕 `graphify` 运行手册中的转写参考文档 [transcribe.md](https://link.gitcode.com/i/d3285781588e0f1b84886dfdbc4fe7f6)，完整讲解 "Step 2.5 - Tra

avatar 天工造物局

ML-For-Beginners 终章：经典机器学习在金融、医疗、零售等八大行业中的真实落地场景

本篇技术指南基于开源课程仓库 ML-For-Beginners 的收尾课程《Postscript: Machine learning in the real world》（对应仓库目录 [9-Real-World/1-Applications](https://link.gitcode.com/i/6b23002df80861c20abf34d7db63ef41)）编写。该课此前 11 周的教学带

avatar 天工造物局