我正在尝试使用CSS将一个div元素垂直和水平居中。
我看到的所有例子都使用像素值这样的硬编码值。
是否可能仅使用百分比值而不使用JavaScript来居中一个div元素呢?
这是我的测试:jsfiddle.net
我正在尝试使用CSS将一个div元素垂直和水平居中。
我看到的所有例子都使用像素值这样的硬编码值。
是否可能仅使用百分比值而不使用JavaScript来居中一个div元素呢?
这是我的测试:jsfiddle.net
您需要知道div的大小。(是的,div必须有一个固定的大小)。
div {
width: 50px;
height: 50px;
}
他的 div 必须具有绝对定位:
div {
position: absolute;
width: 50px;
height: 50px;
}
div {
position: absolute;
left: 50%;
top: 50%;
width: 50px;
height: 50px;
}
div {
position: absolute;
left: 50%;
top: 50%;
width: 50px;
height: 50px;
margin:-25px 0 0 -25px;
}
请测试。
如有任何问题,请告知。
这实际上可以通过使用:before
选择器来完成(浏览器兼容性有待商榷,但是它确实可以完成)。
请查看Chris Coyier关于此主题的精彩文章,他还提供了一个jsfiddle链接供您尝试。
style="height: 300px;"
尝试删除此部分并查看会发生什么。 - js999
text-align
而不是left
。http://jsfiddle.net/2RdeH/3/ - Saurabh Kumar