縦方向のアライメントCSS

Question

まず、私がここで見つけた他の多くのことを試しましたが、何も私のためには本当にうまくいかないようです。
ブラウザのサイズを変更すると、すべてが完全に水平に動作しますが、垂直方向には要素が上部に隠れて表示されます。
ディスプレイを削除した場合：フレックスの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を中央に：これらのdivの一つがこれです。
position: fixedを削除すると、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 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テーブル。