Table won't vertically center using flexbox

Question

I'm trying to vertically center a table using the flexbox property but it won't center.

I've tried to play with the heights of the container/child, but the problem still persists. I also tried other vertical-centering methods like display: table; / display:table-cell or positioning the parent to relative and the child absolute with top: 50% ,left: 50%;

.tableWrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

table {
  width: 65%;
  table-layout: fixed;
  font-family: arial, sans-serif;
  border-collapse: collapse;
  border: 1px solid #dddddd;
  word-wrap: break-word;
}

td,
th {
  border: 1px solid #dddddd;
  padding: 8px;
  text-align: center;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

table ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

<!DOCTYPE html>
<html>

<head>
  <style>
  </style>
</head>

<body>
  <main>

    <div class="tableWrap">

      <table>
        <tr>
          <th>Title</th>
        </tr>
        <tr>
          <td>Test0:</td>
        </tr>

        <tr>
          <td>Test1</td>
        </tr>
        <tr>
          <td>Test2:</td>
        </tr>

        <tr>
          <td>
            <ul>
              <li>Test3.</li>
            </ul>
          </td>
        </tr>
      </table>

    </div>

  </main>
</body>

</html>

the *flexbox container* (`tableWrap`) is only as high as `table` - give it a height (say 100vh) and you can see the vertical alignment. see https://jsfiddle.net/bchnt5os/ — kukkuz, May 05 '19 at 15:52

score -1 · Answer 1 · answered May 05 '19 at 16:17

-1

Problem is in height of body, html, and .tableWrap. They are automatically decreasing height. In your situation the solution is:

html,
body,
main,
.tableWrap{
  height: 100%;
}

answered May 05 '19 at 16:17

ISD

984
1
6
21

Table won't vertically center using flexbox

1 Answers1