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;
  }

＆＃13;

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

＆＃13;

<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>

＆＃13;

替换垂直：中间，对齐：使用div结构的中心制表

2 个答案: