用div結構替換垂直：中間，對齊：中心制表符

Question

我創建的大多數內容都需要居中放置，但可以根據需要進行縮放，因此，我使用表格布局來幫助居中放置內容已經多年了。 但是，在引入flex的情況下，我相信它已經變得更加高效（html更少）。 我已經做了一些研究，但是在分配的時間內還沒有找到合適的跨瀏覽器解決方案。

非常簡單，我需要替換以下代碼：

 <style>
  .app-frame {position:fixed;top:0;left:0;width:100%;height:100%;}
  .app-frame td {vertical-align:middle;text-align:center;}
  .app-content {display:inline-block;border:1px solid gainsboro;max-width:600px;position:relative;}
  </style>

  <table class="app-frame">
    <tr>
      <td>
        <div class="app-content">
          <!--app-->

          <div class="slide" id="slide1">
            <h1>Step 1: Name your character.</h1>
            <p class=info>You can change this at any time after creation.</p>
            <label>Character's Name</label>
            <input name="charname" />
          </div>


          <!--/app-->
        </div>
      </td>
    </tr>
  </table>

一個允許我使用div的解決方案，如下所示：

<div class="app-frame">
    <div class="app-content"> ... </div>
</div>

Answer 1

這是使用CSS flexbox將div水平居中的方法：

 .app-frame{ display:flex; justify-content:center; align-items:center; width:100% } 

 <div class="app-frame"> <div class="app-content">Centered DIV</div> </div> 

它更加靈活，因為您無需觸摸HTML即可更改布局。

Answer 2

這些是（用於容器元素的）設置，您可以使用flex使用該設置在垂直和水平方向上居中包含的所有元素：

.slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  }

 .slide { display: flex; flex-direction: column; justify-content: center; align-items: center; } 

 <div class="app-frame"> <div class="app-content"> <div class="slide" id="slide1"> <h1>Step 1: Name your character.</h1> <p class=info>You can change this at any time after creation.</p> <label>Character's Name</label> <input name="charname" /> </div> </div> </div>