垂直對齊CSS

Question

首先，我嘗試了很多其他的東西，我發現在這裏，似乎沒有任何東西真的對我有用。
當我調整瀏覽器的大小時，所有東西都是完美的，但是垂直方向上，元素隱藏在頂部。
如果我刪除顯示：flex內容的一些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，它導致divs在小分辨率時溢出視野。
您可以移除柔性盒，您已經使用桌面顯示器將其對中。

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>

Table display瀏覽器支持表。
Flexbox support表。