首頁(yè) 猿問(wèn) 絕對(duì)定位垂直居中問(wèn)題

絕對(duì)定位垂直居中問(wèn)題

CSS3

雨丶辰 2016-02-18 16:35:48

在<body><div class="wrap"></div></body>這樣的html結(jié)構(gòu)中，使用.wrap{????width:100%;????height:600px;????position:absolute;????top:50%;????margin-top:-300px;????background-color:#333;????overflow:hidden;}這樣的樣式，為什么無(wú)法讓div垂直居中。但在課程視頻中卻可以居中，請(qǐng)問(wèn)怎么解決。

查看完整描述

2 回答

阿賈大魔王

TA貢獻(xiàn)29條經(jīng)驗(yàn) 獲得超28個(gè)贊

不好意思，我按照你的代碼寫(xiě)，它的垂直居中沒(méi)有問(wèn)題，也沒(méi)拼寫(xiě)或標(biāo)點(diǎn)的錯(cuò)誤。顯示如下：

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

雨丶辰
哦no，誰(shuí)能告訴我這是怎么回事。。。。。我糾結(jié)老久了

回復(fù) 2016-02-18

EM_xiaohe

TA貢獻(xiàn)2條經(jīng)驗(yàn) 獲得超0個(gè)贊

可以啊， ?你的代碼中分號(hào) 和冒號(hào) 你再看看。。。

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

EM_xiaohe
你看看你父元素子元素的結(jié)構(gòu)關(guān)系對(duì)不對(duì)，父元素的樣式對(duì)不對(duì)

回復(fù) 2016-02-18
雨丶辰
父元素body沒(méi)有設(shè)置任何樣式，就是那段代碼那樣的，但無(wú)法居中。在瀏覽器中top:50%;計(jì)算出來(lái)的值只有193。

回復(fù) 2016-02-18