我試圖（幾乎）在屏幕上垂直居中放置一個容器。爲此，我將其定位爲relative並使用top: 40%;和transform: translateY(-50%);的組合。CSS'top'不會將元素向下推動屏幕

問題是，top不起作用（因爲沒有將容器壓入頁面），但如果我檢查Firebug或Chrome中的元素，我可以看到相當於40％的元素已添加到容器頂部。如果我只需單擊該值並按Enter鍵，則更改將反映在頁面上。

所以我的問題是，爲什麼這不起作用，即使top似乎是正確計算？

這裏是我的CSS -

body:not(.mobile) #login{ 
    padding:   0 0 40px; 
    top:    40%; 
    -webkit-transform: translateY(-50%); 
    -ms-transform:  translateY(-50%); 
    transform:   translateY(-50%); 
} 
#login{ 
    position: relative; 
    z-index: 10; 
}

下面是HTML如何呈現

<body class="login login-action-login wp-core-ui locale-en-gb"> 

    <div id="login"> 

     { Login form goes here } 

    </div> 
    <div class="clear"></div> 

</body>

下面是一個屏幕截圖顯示的問題

來源

2015-11-19 David Gard

您可以發佈您完成的代碼或提供演示？ – Alex

這個CSS將修復它：

body:not(.mobile) #login{ 
    padding:   0 0 40px; 
    top:    40%; 
} 
#login{ 
    position: absolute; 
    z-index: 10; 
}

編輯：你可以看到它正在研究這個js小提琴：https://jsfiddle.net/7h0nz7nz/

來源

2015-11-19 16:13:13

乾杯。我還必須使用'left：50％'和'transform：\t \t \t translate3d（-50％， - 50％，0）;'，但它現在正在顯示。 –

CSS'top'不會將元素向下推動屏幕

這裏是我的CSS -

下面是HTML如何呈現

下面是一個屏幕截圖顯示的問題

回答

相關問題