CSS居中

列举 CSS 的一些居中方案

水平居中

父容器样式

1
2
3
4
1
2
3
4
1
2
3
4
#blogManagePanel > div.col-md-12 {
	width: 100%;
	height: 100%;
}

div样式

1
2
3
4
5
6
#blogManagePanel .timeline-icon.bg-more {
		margin: 0 auto;
		// 使用相对定位可以让div不限定在父容器可视内容中
		position: relative;
		left: 50%;
}

垂直居中

父容器样式

1
2
3
4
1
2
3
4
1
2
3
4
#blogManagePanel > div.col-md-12 {
	width: 100%;
	height: 100%;
}

div样式

1
2
3
4
5
#blogManagePanel .timeline-icon.bg-more {
	margin: 0 auto;
	position: absolute;
	top: 50%;
}

完全居中

父容器样式

1
2
3
4
1
2
3
4
1
2
3
4
#blogManagePanel > div.col-md-12 {
	width: 100%;
	height: 100%;
}

div样式

1
2
3
4
5
6
7
8
#blogManagePanel .timeline-icon.bg-more {
	margin: auto;
	position: absolute;
	top: 0; 
	left: 0; 
	bottom: 0; 
	right: 0;
}