how to have table in the middle of div vertically

Question

This is surprisingly hard to find out how to do. All solutions I've found so far have been wrong. Here's my problem:

I have a table in a div:

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

And I'm putting images inside it:

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

All of the dishes end up on a row, like this:

This is what I want. Now, I want the row of dishes to be in the middle of the div, vertically. So a row in the middle of the page in this case, since the div is taking up all of the page, because of my css:

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

I've tried to use flexbox, it didn't change anything:

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

Does somebody know how to get this to work?

Possible duplicate of [How to horizontally center a
in another
?](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div) — MEE, Jan 26 '18 at 20:33
Possible duplicate of [How to vertically center a div for all browsers?](https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) — Temani Afif, Jan 26 '18 at 20:34

score -1 · Answer 1 · answered Jan 26 '18 at 22:10

I think flexbox didn't work because you have a single item inside #dishreel: a table. hav you tried giving the table a class with flexbox display?

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

score -1 · Answer 2 · answered Jan 26 '18 at 22:14

-1

A simple solution is to make the margin right/left auto for the table:

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

Then make the width 100% for the td:

td {
  width: 100%;
}

answered Jan 26 '18 at 22:14

Suraj Kothari

1,642
13
22

how to have table in the middle of div vertically

2 Answers2