頂部：50％的CSS無法正常工作

Question

我正在做一個網站，嘗試將文本居中，但我不知道頂部不起作用。 如果我使用這樣的東西，它會起作用：

up:25px;

但這在我要使用此方法時不起作用：

up:50%;

你能幫助我嗎？ 這是我的代碼：

 .absolute{ position:absolute; } .relative{ position:relative; } .white{ background-color:white; } #menu-title{ width:300px; z-index:5; top:50%; left:calc(50% - 150px); top:calc(50% - 2.5em); } 

 <div class='relative' id='menu'> <div class='absolute white' id='menu-title'> <h2 >Menu</h2> </div> </div> 

Answer 1

考慮到要將<h2>放在ID為'menu-title'的<div>居中，有幾種方法可以做到。

如果要使用top屬性，首先必須定義固定位置，如下所示：

#menu-title {
    position: fixed;
    top: 50%;
} 

另一種方法是使用邊距：

#menu-title {
    margin-top: 100px;
}

您可以隨時更改px。

Answer 2

您應該使用position：fixed，並且還取決於文本的大小，您可以使用transform將其精確地移動到中心

#menu-title{
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
 }

希望能有所幫助

Answer 3

position:fixed

 .absolute{ position:fixed; } .relative{ position:relative; } .white{ background-color:white; } #menu-title{ width:300px; z-index:5; top:50%; left:calc(50% - 150px); top:calc(50% - 2.5em); } 

 <div class='relative' id='menu'> <div class='absolute white' id='menu-title'> <h2 >Menu</h2> </div> </div> 

Answer 4

首先...它正在工作，只是沒有您期望的那樣。 CSS top:calc(50% - 2.5em)相對於第一個POSITIONED祖先元素。 在您的情況下，這是具有id="menu"的相對（父）元素。 此元素的高度為0。因此它可以正常工作，但顯然不符合您的預期。

您可能已經期望菜單具有一定的高度。 它不是，因為它的唯一子項（菜單標題div）位於絕對位置。 絕對定位的元素不會長大他們的父母。

您更可能希望標題相對於視口高度而不是相對於父視口高度定位。

---

可以通過三種方式相對於視口高度定位菜單標題：

解決方案1.從父級移除相對位置

這將使父級位置靜態（未定位），並且第一個定位的祖先元素成為視口。 視口本質上具有100％的高度。 因此，此解決方案有效。 可在以下位置找到此解決方案的有效示例： http : //codepen.io/anon/pen/bBLZva

解決方案2.給父母100％的身高

如果無法從祖先移除相對位置，則可以給父對象100％的高度。 但是，這不是直接的任務。 簡單地將CSS height: 100%添加到父級是不夠的height: 100%到父級。 菜單div的高度是相對於其父元素的高度，而不是相對於視口的高度。 因此，您需要將其父母明確設置為100％（視口高度）。 這可以通過在CSS中添加： body,html {height: 100%;}來實現。 可在以下位置找到此解決方案的有效示例： http : //codepen.io/anon/pen/XNZGOv

解決方案3.使用固定位置

知道position: fixed不同於position: absolute AND在較舊的iOS和Android版本（常規瀏覽器）上存在兼容性問題。 但是，它可能會導致預期的行為。 這可以通過以下事實來解釋：“位置：固定”表示相對於視口（而不是相對於父視口）的位置。 您應該使用標題本身固定的位置。 可在以下位置找到此解決方案的有效示例： http : //codepen.io/anon/pen/PbQgpB