css3 居中定位方法

AdoreFT

于 2017-11-22 17:25:11 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

文章标签： html css

本文链接：https://blog.youkuaiyun.com/oneFT/article/details/78606031

本文介绍了三种使用CSS实现div元素居中的方法，包括通过绝对定位结合负边距、自动边距以及转换属性来精确控制元素的位置。

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

html中实现div居中定位的方法：CSS部分代码如下：

css代码如下：
方法（1）：
.test {
	width:100px;
	height:100px;
	background:#000;
	position:absolute;
	left:0;
	top:0;
	margin-left:-50px;
	margin-top:-50px;
}
方法（2）：
.test {
	width:120px;
	height:120px;
	position:absolute;
	margin:auto;
	left:0;
	right:0;
	top:0;
	bottom:0;
}
方法（3）：
.test {
	width:100px;
	height:100px;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
	-o-transform:translate(-50%,-50%);
}