Vertical alignment 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.