这是我的HTML代码：

<div class="bg-image"></div>

<div class="flex-container">
        <div class="left arrow">
            <button class="btn" style="background-color: azure; border: 2px solid black;" id="left"><i class="fas fa-angle-double-left"></i></button>
        </div>
        <div class="bg-text" id="first_div">
            <h4><u>Newspaper particulars</u><i class="fa fa-sign-out" style="float: right; cursor: pointer;"></i></h4><br>
            <ul>
                <li><label for="date">Select date</label><br></li>
                <input type="date" id="date" name="date" style="text-align: center; width: 100%;"><br><br>
                <li><label for="unit">Select division</label><br></li>
                <select name="unit" id="unit" style="width: 100%; text-align: center;">
                    <option value="default" id="default">Click to select</option>
                    <option value="HQ">HQ</option>
                </select><br><br>
                <li><label for="cat">Select news category</label><br></li>
                <div id="cat" style="border: 2px solid white; padding: 5px;">
                    <input type="radio" id="newspaper" name="category" value="News paper">
                    <label for="newspaper">News paper</label><br>
                    <input type="radio" id="newsportal" name="category" value="News portal">
                    <label for="newsportal">News portal</label><br>
                    <input type="radio" id="socialmedia" name="category" value="Social media">
                    <label for="socialmedia">Social media</label>
                </div>
            </ul>
        </div>
        <div class="para" id="second_div">
            <div class="container">
                <span id="preview_text" style="text-align: center; vertical-align: middle; color: red;">Image preview</span>
            </div>
        </div>
        <div class="right arrow">
            <button class="btn" style="background-color: azure; border: 2px solid black;" id="right"><i class="fas fa-angle-double-right"></i></button>
        </div>
        <div id="but">
            <button type="button" class="btn btn-primary btn-block">Upload</button>
        </div>
    </div>

这是我的CSS：

.bg-image {
  /* The image used */
  background-image: url("/background.jpg");
  
  /* Add the blur effect */
  filter: blur(8px);
  -webkit-filter: blur(8px);
  
  /* Full height */
  height: 100%; 
  
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Position text in the middle of the page/image */
.left.arrow{
  /* margin-top: 30%; */
  margin: auto 0;
  z-index: 2;
  width: fit-content;
  padding: 10px;
  height: fit-content;
}
.right.arrow{
  /* margin-top: 30%; */
  margin: auto 0;
  z-index: 2;
  width: fit-content;
  padding: 10px;
  height: fit-content;
}
.bg-text {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  z-index: 2;
  height: 100%;
  width: fit-content;
  padding: 20px;
  height: fit-content;
}
.para{
  background-color: rgba(0, 0, 0, 0.329); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  z-index: 2;
  width: 50%;
  padding: 10px;
  text-align: center;
}
.flex-container {
display: flex;
width: 70%;
margin: 0 auto;
position:fixed;
left: 20%;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em; /*set to a negative number 1/2 of your width*/
}
.container{
width:100%;
height:100%;
max-height: 100%;
}
#preview_text{
line-height: 500px;
}
#but{
  display: flex;
  margin: 0 auto;
  position: absolute; 
  top:100%;
  left: 35%;
}

我的问题是，无论我如何修改CSS，flex div永远不会位于屏幕的中心。有时当我试图在移动的屏幕上查看html页面时，flex div中的一个div会比另一个长。我的要求是，flex div中的两个div在任何时候都应该等高。整个flex div应该位于屏幕的中心。
but div应该位于flex div的下方，并且应该位于相对于flex div的中心。left arrow和right arrow div也应该位于中心（也相对于flex div）。这是我想要的图形表示：
enter image description here
我该怎么办？请帮帮我。