基於可查看的瀏覽器空間居中DIV

-1

我想基於當前可查看的瀏覽器空間居中DIV（form），並且考慮到我滾動的頁面有多遠。當我按下按鈕時，我希望窗體居中。我的嘗試如下。我的嘗試的問題是，如果我向下滾動頁面足夠遠，例如表單不輸入，但是如果我再次向上滾動頁面，則居中。基於可查看的瀏覽器空間居中DIV

如果我向下滾動頁面，並希望表單顯示，則第一個圖像顯示我得到的內容。

如果我在頁面頂部，那麼表格是正確居中。

PS： - 沒有 jQuery的解決方案，請

CSS的DIV #docForm

#docForm { 
    font-family: sans-serif; 
    border: 1px solid #ccc; 
    width: 600px; 
    padding: 10px; 
    height: 425px; 
    transform: translate3d(-50%, -50%, 0); 
    z-index: 10000; 
    position: absolute; 
    background-color: white; 
    top: 50%; 
    bottom: 0; 
    left: 50%; 
    right: 0; 
    border-radius: 10px; 
    box-shadow: 3px 3px 3px #b8b8b8; 
    color: #484848; 
}

來源

2016-08-01 dave

，便有可能向我們展示你的意思是使用什麼樣的一個片段瀏覽器兼容？這非常含糊。 – Randy

如果你把它包裝在100％寬和高的'position：fixed'元素中，它應該沒問題。位置固定的元素不滾動。 – Djave

請不要在標題中放置諸如「請不要jQuery解決方案」等評論 - 如果有的話，這應該在問題的描述中（但不能用jquery標記它，理論上也應該足夠） – TheThirdMan

#docForm { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
}

，或者如果你想要到u本身彎曲，創建一個類formContainer一個div，把你的形式，在它的內部，然後：

.formContainer { 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

來源

2016-08-01 10:33:49 Gatsbill

真棒。只是我在找什麼。 – dave

既然你有一個固定的寬度和高度，你可以這樣做在左邊和頂部設置的中心屏幕上，然後通過它的一半抵消容器的寬度和高度：

#docForm { 
    width: 600px; 
    height: 425px; 
    border: 1px solid #ccc; 
    padding: 10px; 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    margin-left: -311px /* -(width + padding*2 + border_width*2)/2) */ 
    margin-top: -223px /* -(height + padding*2 + border_width*2)/2) */ 
}

所有設置不以這個答案省略解決方案相關的，但是請注意，您必須不設置right或bottom，或者你會得到意想不到的結果。

相較於使用flexbox或translate，這將是與不支持CSS 3級。

來源

2016-08-01 10:37:31 TheThirdMan

基於可查看的瀏覽器空間居中DIV

回答

相關問題