css实现页面元素居中
Nov 18 , 2015

水平居中


对于已知宽度的块级元素实现水平居中只需要设置
1
2
margin-left:auto;
margin-right:auto;
对于多个块级元素实现水平居中只需要设置
1
2
3
4
5
6
7
8
9
10
11
12
13
//1
父类{
	text-align:center;
}
块级元素{
	display:inline-block;
}
//2
父类{
	display:flex;(flex布局兼容性问题)
	justify-content:center;
}

对于未知宽度的块级元素实现水平居中
1
2
3
position:absolute;
left:50%;
transform:translateX(-50%);//若宽度w已知,可采用margin-left:-w/2px方式，两者实现结果一样

垂直居中


多行的行内元素垂直居中
1
2
display:table-cell;
vertical-align:middle;
已知高度的块级元素垂直居中
1
2
3
position:absolute;
top:50%;
margin-top:-h/2px;(已知高度一半)
未知高度的块级元素垂直居中
1
2
3
4
5
6
7
8
//1
position:absolute;
top:50%;
transform:translateY(-50%);
//2
display:flex;
justify-content:center;
align-items:center;
网上看到相关的教程，自己整合记录下来，方便自己后面查看

PREVIOUS NEXT
 |