如何将表垂直放在div的中间

Question

令人惊讶的是，很难找到该怎么做。到目前为止我找到的所有解决方案都是错误的。这是我的问题：

我在div中有一张表：

<div id="dishreel">
    <table>
        <tr>
        </tr>
    </table>
</div>

我将图像放入其中：

for(var i=0; i<allDishes.length; i++){
    var td = document.createElement("td");

    var img = document.createElement("img");
    img.classList.add("dishimg");
    img.src = "images/"+allDishes[i].image;

    var p = document.createElement("p");
    var text = document.createTextNode(allDishes[i].name);
    p.appendChild(text);

    td.append(img);
    td.append(p);
    dishreel.find("tr").append(td);
}

所有菜肴都排成一排，如下：

这就是我想要的。现在，我希望这排餐具垂直位于div的中间。因此在这种情况下页面中间有一行，因为div占用了所有页面，因为我的css：

#dishreel{
    height:100%;
    width:100%;
}

我试过使用flexbox，它没有改变任何东西：

#dishreel{
    height:100%;
    width:100%;
    display:flex;
    flex-direction: column;
    justify-content: center;
}

有人知道如何让它发挥作用吗？

Answer 1

我认为flexbox没有用，因为#dishreel里面有一个项目：一张桌子。你试过让这个桌子上有一个带有flexbox显示的课程吗？

#dishreel {
    height:100%;
    width:100%;
    display:flex;
    flex-direction: column;
    justify-content: center;
}


.wrap {
    display: flex;
    flex-direction: column;
}

<div id="dishreel">
    <table class="wrap">
        <tr>
        </tr>
    </table>
</div>

Answer 2

一个简单的解决方案是为表格设置右/左自动边距：

Broadcast::channel('chat', function ($user) {
return $user;});

然后为td：

设置宽度100％

table {
  margin-right: auto;
  margin-left: auto;
}