Css居中的几种写法

发表于   |   分类于   |  

前端居中有几种写法，就我用过的几种总结一下。

第一种是用绝对定位居中

1
2
3
4
5
6
7
8
9
10
div{
	width: 100px;
	height: 100px;
	background: red;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -50px;
	margin-left: -50px;
}

当我们不设置宽高的时候也可以用这种方式实现

1
2
3
4
5
6
div{
	position: absolute;
	left: 50%;
	right: 50%;
	transform: translate(-50%，-50%);
；}

当我们只设置左右居中时可以用最常见的

1
2
3
4
5
div{
	width: 100px;
	height: 100px;
	margin: 100px auto;
}