首頁猿問固定高度使用絕對定位無法垂直居中？

固定高度使用絕對定位無法垂直居中？

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;}這樣設(shè)置div的樣式，為什么只能實現(xiàn)水平居中而不能實現(xiàn)垂直居中？

查看完整描述

7 回答

慕碼人2456685

TA貢獻1條經(jīng)驗獲得超0個贊

你的父元素應(yīng)該設(shè)置為relative，并且高度應(yīng)該設(shè)置為100%；應(yīng)該是html 和body吧，你設(shè)置一下

反對回復(fù) 2016-02-18

雨丶辰
<body><div class="wrap"></div></body>.就是這個簡單的html結(jié)構(gòu)，但div無法垂直居中，按你說的設(shè)置了下，依然沒有。父元素height:100%;時，子元素是沒辦法通過絕對定位來實現(xiàn)垂直居中啊

回復(fù) 2016-02-18

echo_kinchao

TA貢獻600條經(jīng)驗獲得超86個贊

是不是相對的關(guān)系沒有寫對

反對回復(fù) 2016-02-18

雨丶辰
<body> <div class="wrap"> </div> </body> 這樣的html結(jié)構(gòu)，應(yīng)該是相對于瀏覽器的左右上下吧。

回復(fù) 2016-02-18

qq_舒寧_0

TA貢獻1條經(jīng)驗獲得超0個贊

父級高度的問題吧。

反對回復(fù) 2016-02-18

雨丶辰
<body> <div class="wrap"> </div> </body> 這樣的html結(jié)構(gòu)，求告知下如何解決。

回復(fù) 2016-02-18

卷毛0

TA貢獻2條經(jīng)驗獲得超0個贊

可以垂直居中啊

反對回復(fù) 2016-02-18

李曉健

TA貢獻1036條經(jīng)驗獲得超461個贊

應(yīng)該可以的吧，你看確定一下你的這個DIV是相對于誰來定位，那個元素的高度是多少。還有問題就給一下完整的代碼。

反對回復(fù) 2016-02-18

雨丶辰
<body> <div class="wrap"> </div> </body> 這樣的html結(jié)構(gòu)，求告知下。

回復(fù) 2016-02-18
i愛慕客
woyeyao:huidawenti,wojianpan zenme huaile a

回復(fù) 2016-02-18
李曉健
這樣的話body的高度就是warp的高度，所以垂直當(dāng)然不會有居中了，你可以把html和body的高度都設(shè)成100%再試試

回復(fù) 2016-02-19