在移動設備上的當前視口的中心顯示div

如何在當前視口的中心顯示div？我特別要求移動設備，因爲它們是最有問題的。在移動設備上的當前視口的中心顯示div

例如，我有2個按鈕顯示相同的div。一個在頁面頂部，另一個在底部。該頁面的高度總共爲2個視口高度。如果所呈現的div的填充頂部是40px，那麼當按下底部按鈕時div將不可見。顯然，這種解決方案對移動設備來說不夠靈活。你推薦什麼解決方案？

圖示：如果我將填充頂部設置爲40px，則綠色div將出現在頁面的頂部（如圖所示）。如果按下底部的紅色按鈕，綠色div也會出現在頂部，40px從中。它甚至對用戶不可見。它應該從第二個視口的頂部（用戶看到的屏幕）出現40px。我希望這有幫助。

來源

2016-11-05 sanjihan

我不是downvoter，但我可以建議postin g你想要完成什麼的畫面，因爲我無法理解你所描述的內容。 – jcuenod

我會畫秒在一個圖表。 – sanjihan

請發表[mcve] –

使用position: fixed。

function toggleDiv() { 
 
    var div = document.getElementById('togglable'); 
 
    if (div.style.display !== 'none') { 
 
     div.style.display = 'none'; 
 
    } 
 
    else { 
 
     div.style.display = 'block'; 
 
    } 
 
};

#container-parent { 
 
    position: absolute; 
 
    background-color: #eee; 
 
    height: 95%; 
 
    width: 90%; 
 
    overflow: scroll; 
 
} 
 
#container { 
 
    height: 500px; 
 
} 
 
#togglable { 
 
    position: fixed; 
 
    top: 10%; 
 
    height: 80%; 
 
    left: 25%; 
 
    width: 50%; 
 
    background-color: red; 
 
} 
 
#spacer { 
 
    height: 90%; 
 
    
 
}

<div id="container-parent"> 
 
    <div id="container"> 
 
    <input type=button onclick="toggleDiv()"> 
 
    <div id="togglable"></div> 
 
    
 
    <div id="spacer"> 
 
     <!-- I don't know how you have got your buttons attached but the point is that `position: fixed` positions the togglable div relative to the viewport --> 
 
    </div> 
 
    <input type=button onclick="toggleDiv()"> 
 
    </div> 
 
</div>

來源

2016-11-05 21:33:31 jcuenod

請使用display:flex主容器和樣式表看起來是這樣的：

display:flex; 
flex-direction: column; //to align them vertically 
justify-content:center; 
align-items: center; //centers out the whole elements horizontally.

來源

2016-11-05 23:33:42

一個簡單的解決辦法是做這個 -

position: fixed; 
top: 50%; 
left: 50%; 
/* bring your own browser transform prefixes */ 
transform: translate(-50%, -50%);

來源

2016-11-05 23:47:24 Mukund

我們完全一樣 – camou

在移動設備上的當前視口的中心顯示div

回答

相關問題