垂直居中的元素，它不會變得不可訪問

Question

我想中心在頁面中間的元素。我可以將它居中，但如果我垂直調整頁面大小，直到視圖高度小於居中元素，則元素將垂直脫離屏幕而不顯示滾動條。你可以看到這個問題的演示在這裏：

http://codepen.io/mse/pen/BWayXV

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
} 
 

 
.outer { 
 
    text-align: center; 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
} 
 

 
.inner { 
 
    display: inline-block; 
 
    width: 400px; 
 
    height: 800px; 
 
    background: grey; 
 
}

<div class="outer"> 
 
    <div class="inner"></div> 
 
</div>

我要指出，我已經嘗試了幾個垂直居中的其他方法，包括實現Flexbox，和我米仍然遇到同樣的問題。有沒有辦法用這種垂直居中方法來解決這個問題，還是至少有一種垂直居中方法不存在這個問題？

Answer 1

這應該工作

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
html, body { 
 
    height: 100vh; 
 
} 
 
.outer { 
 
    height: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.inner { 
 
    width: 400px; 
 
    height: 800px; 
 
    background: grey; 
 
}

<div class="outer"> 
 
     <div class="inner"></div> 
 
</div>

Answer 2

你可以嘗試限制你的內部元件的尺寸。如果您通過固定px值定義大小，只要屏幕變得小於px數量，它就會開始滾動。如果你可以改變內部元素的高度，你可以使用vh或者你可以執行@media查詢來減小較小屏幕上的大小。這裏＃是一個例子：

.inner { height: 100vh; /* 100 view height percentage*/} 

注：視口百分比長度的相對於包含塊初始大小和受滾動條的上視區的存在。

Answer 3

試試這個

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
} 
 

 
.outer { 
 
    display:flex; 
 
    justify-content:center; 
 
    align-items:center; 
 
} 
 

 
.inner { 
 
    background: #ccc; 
 
    width: 400px; 
 
    height: 600px 
 
}

<div class="outer"> 
 
    <div class="inner"> I'm a block-level element centered vertically within my parent.</div> 
 
</div>

更多信息：https://css-tricks.com/centering-css-complete-guide/

CSS VH中心發生器：http://howtocenterincss.com/