html - 用div结构替换垂直:中间，对齐:中心制表符

我创建的大多数内容都需要居中，但可以根据需要进行缩放，因此我使用表格布局来帮助居中放置内容已经多年了。但是，在引入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>

最佳答案

这些是（用于容器元素的）设置，您可以使用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>

关于html - 用div结构替换垂直:中间，对齐:中心制表符，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41667893/