垂直對齊CSS

Question

首先，我嘗試了在這里發現的許多其他事情，但似乎沒有什么對我真正有用。
當我調整瀏覽器的大小時，所有元素在水平方向都可以正常工作，但在垂直方向上，元素隱藏在頂部。
如果刪除display：flex ，則Content中的某些div會移到屏幕的左側。 這些div之一是：

 html,body { height:100%; width:100%; min-width: 320px; margin:0; padding:0; display: table; background-image: url('background.png'); background-attachment: fixed; } .content{ width: 100%; height:100%; overflow:auto; align-items: center; justify-content: center; display: table-cell; flex-direction: column; display: flex; text-align: center; vertical-align: middle; position: fixed; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); color:white; background-color: rgba(0,0,0,0.4); } .window{ width:40%; color:white; border-radius: 20px; background-color: rgba(255,255,255,0.1); border: 3px solid #03A0D3; margin:0; } 

  <div class="content"> <h1>Title</h1> <p>Text..</p> <div class="window"> <div> <p>Text</p> </div> </div> <div> <?php @include_once ('modules/file.php') ?> </div> <p>Some text here</p> <p>Other text here</p> </div> 

Answer 1

使用margin 0 auto將div水平居中。
移除position: fixed ，這會導致div在小分辨率下溢出視線。
您可以刪除flexbox，您已經將其與表格顯示居中放置了。

 html,body { height:100%; width:100%; min-width: 320px; margin:0; padding:0; display: table; background-image: url('background.png'); background-attachment: fixed; } .content{ width: 100%; height:100%; overflow:auto; /*align-items: center; justify-content: center;*/ display: table-cell; /* flex-direction: column; display: flex;*/ text-align: center; vertical-align: middle; /*position: fixed; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);*/ color:white; background-color: rgba(0,0,0,0.4); } .window{ width:40%; color:white; border-radius: 20px; background-color: rgba(255,255,255,0.1); border: 3px solid #03A0D3; margin:0 auto;/*add*/ } 

  <div class="content"> <h1>Title</h1> <p>Text..</p> <div class="window"> <div> <p>Text</p> </div> </div> <div> <?php @include_once ('modules/file.php') ?> </div> <p>Some text here</p> <p>Other text here</p> </div> 

該表顯示瀏覽器支持的表。
Flexbox支持表。