垂直对齐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表。