垂直对齐CSS

Question

First of all, I have tried many other thing I found out here, and nothing seems to really work for me.
When I resize the browser everything works perfect horizontally, but vertically, element hidden at the top.
If I remove display:flex some of the divs in Content move to the left side of the screen. One of those div is this:

 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

Use margin 0 auto to center the div horizontally.
Remove position: fixed , it's causing the divs to overflow out of view on small resolution.
You can remove the flexbox, you are already centering it with the table display.

 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 browser support table.
Flexbox support table.