固定高度使用绝对定位无法垂直居中？

CSS3

雨丶辰 2016-02-18 11:21:53

.wrap { width:800px; height:600px; position:absolute; top:50%; left:50%; margin-left:-400px; margin-top:-300px; background-color:#333; overflow:hidden;}这样设置div的样式，为什么只能实现水平居中而不能实现垂直居中？

查看完整描述

7 回答

慕码人2456685

TA贡献1条经验获得超0个赞

你的父元素应该设置为relative，并且高度应该设置为100%；应该是html 和body吧，你设置一下

反对回复 2016-02-18

雨丶辰
<body><div class="wrap"></div></body>.就是这个简单的html结构，但div无法垂直居中，按你说的设置了下，依然没有。父元素height:100%;时，子元素是没办法通过绝对定位来实现垂直居中啊

回复 2016-02-18

echo_kinchao

TA贡献600条经验获得超86个赞

是不是相对的关系没有写对

反对回复 2016-02-18

雨丶辰
<body> <div class="wrap"> </div> </body> 这样的html结构，应该是相对于浏览器的左右上下吧。

回复 2016-02-18

qq_舒宁_0

TA贡献1条经验获得超0个赞

父级高度的问题吧。

反对回复 2016-02-18

雨丶辰
<body> <div class="wrap"> </div> </body> 这样的html结构，求告知下如何解决。

回复 2016-02-18

卷毛0

TA贡献2条经验获得超0个赞

可以垂直居中啊

反对回复 2016-02-18

李晓健

TA贡献1036条经验获得超461个赞

应该可以的吧，你看确定一下你的这个DIV是相对于谁来定位，那个元素的高度是多少。还有问题就给一下完整的代码。

反对回复 2016-02-18

雨丶辰
<body> <div class="wrap"> </div> </body> 这样的html结构，求告知下。

回复 2016-02-18
i爱慕客
woyeyao:huidawenti,wojianpan zenme huaile a

回复 2016-02-18
李晓健
这样的话body的高度就是warp的高度，所以垂直当然不会有居中了，你可以把html和body的高度都设成100%再试试

回复 2016-02-19

热搜

最近搜索清空

固定高度使用绝对定位无法垂直居中？

固定高度使用绝对定位无法垂直居中？

7 回答

添加回答