div居中方法

发表于 | 分类于

在页面布局中最常见的的就是居中了，本文介绍几种居中 div 的方法

已知宽度水平居中

1
2
3
4
div{
 	width:200px;
 	margin:0 auto;
}

水平垂直居中-已知宽高

1
2
3
4
5
6
7
8
9
10
11
div {
	position: absolute;
	width: 300px;
	height: 300px;
	margin: auto;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: pink;	/* 方便看效果 */
}

水平垂直居中 - 已知宽高

1
2
3
4
5
6
7
8
9
div {
 	position: absolute;
 	width:500px;
 	height:300px;
 	top: 50%;
 	left: 50%;
 	margin: -150px 0 0 -250px;     	/* 外边距为自身宽高的一半 */
 	background-color: pink;	 	/* 方便看效果 */
}

水平垂直居中-宽高不确定

1
2
3
4
5
6
7
8
9
div {
 	position: absolute;
 	width:500px;
 	height:300px;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
 	background-color: pink;	 	/* 方便看效果 */
}

水平垂直居中 - 未知宽高

flex 布局 实际使用时应考虑兼容性

1
2
3
4
5
6
7
8
9
10
11
.container {
	display: flex;
	align-items: center; 		/* 垂直居中 */
	justify-content: center;	/* 水平居中 */
}
.container div { c
	width: 100px;
	height: 100px;
	background-color: pink;		/* 方便看效果 */
}