如何使用css flexbox垂直和水平居中？

时间：2017-06-23 08:05:07

标签： html css html-table flexbox

我正试图通过flexbox垂直和水平居中。

一个“屏幕” - 中间的一张桌子，滚动， - 中间另一张桌子。

但是通过这段代码“不起作用”： https://plnkr.co/edit/ZeVdR7n6amQhxeta4R0V 

<!doctype html>

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">

<body>
  <div class="wrapper">
    <table>
      <thead>
        <tj>
          <th>1</th>
          <th>1</th>
          <th>1</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>2</td>
          <td>2</td>
          <td>2</td>
        </tr>
        <tr>
          <td>3</td>
          <td>3</td>
          <td>3</td>
        </tr>
        <tr>
          <td>4</td>
          <td>4</td>
          <td>4</td>
        </tr>
      </tbody>

      <tfoot>
        <tr>
          <td>5</td>
          <td>5</td>
          <td>5</td>
        </tr>
      </tfoot>
    </table>
  </div><!-- wrapper end -->

  <div class="wrapper">
  <table>
    <thead>
      <tj>
        <th>1</th>
        <th>1</th>
        <th>1</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>2</td>
        <td>2</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>3</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>4</td>
        <td>4</td>
      </tr>
    </tbody>

    <tfoot>
      <tr>
        <td>5</td>
        <td>5</td>
        <td>5</td>
      </tr>
    </tfoot>
  </table>
  <div><!-- wrapper end -->
</body>

<style>
* {
  margin : 0;
  padding : 0;
}

table {
  text-align : center;
}

thead {
  font-weight : bold;
  background : forestgreen;
}

tfoot {
  font-weight : bold;
  background : tomato;
}

th, td {
  width : 5vw;
}

body {
  min-height : 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper {
  min-height : 100vh;
}
</style>

我哪里错了？

1 个答案:

答案 0 :(得分：2)

如果每个全屏/视口都有table个中心，要在2个表之间滚动，请检查下面的示例1，其中我从body规则移动了所有属性到.wrapper规则。

如果您打算让2 table在彼此之上，请查看下面的示例2，其中flex-direction: column已设置。

要将table并排居中，请从min-height: 100vh规则中移除wrapper，示例3。

样本1 - 每个全屏/视口一个

＆＃13;
＆＃13; 
* {
  margin : 0;
  padding : 0;
}

table {
  text-align : center;
}

thead {
  font-weight : bold;
  background : forestgreen;
}

tfoot {
  font-weight : bold;
  background : tomato;
}

th, td {
  width : 5vw;
}

.wrapper {
  min-height : 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
＆＃13; 
<div class="wrapper">
    <table>
      <thead>
        <tr>
          <th>1</th>
          <th>1</th>
          <th>1</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>2</td>
          <td>2</td>
          <td>2</td>
        </tr>
        <tr>
          <td>3</td>
          <td>3</td>
          <td>3</td>
        </tr>
        <tr>
          <td>4</td>
          <td>4</td>
          <td>4</td>
        </tr>
      </tbody>

      <tfoot>
        <tr>
          <td>5</td>
          <td>5</td>
          <td>5</td>
        </tr>
      </tfoot>
    </table>
  </div><!-- wrapper end -->

  <div class="wrapper">
  <table>
    <thead>
      <tr>
        <th>1</th>
        <th>1</th>
        <th>1</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>2</td>
        <td>2</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>3</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>4</td>
        <td>4</td>
      </tr>
    </tbody>

    <tfoot>
      <tr>
        <td>5</td>
        <td>5</td>
        <td>5</td>
      </tr>
    </tfoot>
  </table>
  <div><!-- wrapper end -->
＆＃13;
＆＃13;
＆＃13;

样本2 - 彼此叠加

＆＃13;
＆＃13; 
* {
  margin : 0;
  padding : 0;
}

table {
  text-align : center;
}

thead {
  font-weight : bold;
  background : forestgreen;
}

tfoot {
  font-weight : bold;
  background : tomato;
}

th, td {
  width : 5vw;
}

body {
  min-height : 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
＆＃13; 
<div class="wrapper">
    <table>
      <thead>
        <tr>
          <th>1</th>
          <th>1</th>
          <th>1</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>2</td>
          <td>2</td>
          <td>2</td>
        </tr>
        <tr>
          <td>3</td>
          <td>3</td>
          <td>3</td>
        </tr>
        <tr>
          <td>4</td>
          <td>4</td>
          <td>4</td>
        </tr>
      </tbody>

      <tfoot>
        <tr>
          <td>5</td>
          <td>5</td>
          <td>5</td>
        </tr>
      </tfoot>
    </table>
  </div><!-- wrapper end -->

  <div class="wrapper">
  <table>
    <thead>
      <tr>
        <th>1</th>
        <th>1</th>
        <th>1</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>2</td>
        <td>2</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>3</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>4</td>
        <td>4</td>
      </tr>
    </tbody>

    <tfoot>
      <tr>
        <td>5</td>
        <td>5</td>
        <td>5</td>
      </tr>
    </tfoot>
  </table>
  <div><!-- wrapper end -->
＆＃13;
＆＃13;
＆＃13;

样本3 - 并排

＆＃13;
＆＃13; 
* {
  margin : 0;
  padding : 0;
}

table {
  text-align : center;
}

thead {
  font-weight : bold;
  background : forestgreen;
}

tfoot {
  font-weight : bold;
  background : tomato;
}

th, td {
  width : 5vw;
}

body {
  min-height : 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
＆＃13; 
<div class="wrapper">
    <table>
      <thead>
        <tj>
          <th>1</th>
          <th>1</th>
          <th>1</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>2</td>
          <td>2</td>
          <td>2</td>
        </tr>
        <tr>
          <td>3</td>
          <td>3</td>
          <td>3</td>
        </tr>
        <tr>
          <td>4</td>
          <td>4</td>
          <td>4</td>
        </tr>
      </tbody>

      <tfoot>
        <tr>
          <td>5</td>
          <td>5</td>
          <td>5</td>
        </tr>
      </tfoot>
    </table>
  </div><!-- wrapper end -->

  <div class="wrapper">
  <table>
    <thead>
      <tj>
        <th>1</th>
        <th>1</th>
        <th>1</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>2</td>
        <td>2</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>3</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>4</td>
        <td>4</td>
      </tr>
    </tbody>

    <tfoot>
      <tr>
        <td>5</td>
        <td>5</td>
        <td>5</td>
      </tr>
    </tfoot>
  </table>
  <div><!-- wrapper end -->
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题