Question

I’m having issues with centering a canvas horizontally. a display: table was added in order to center it vertically. very odd.

html, body {
    width:  100%;
    height: 100%;
    margin: 0px;
}

#container {
    border: solid 1px #000;
    height: 100%;
    width: 85%;
    position: absolute;
    right: 0;
    display:table;
}

#container2 {
    display:table-cell;
    vertical-align:middle;
}

#container img {
    max-width: 100%;
    max-height: 100%;   
}​

<div id="container">
    <div id="container2">
    <img src="http://cultureandcommunication.org/tdm/nmrs/fa1/files/2010/10/lolcats4.jpg" />
    </div>
</div>​

jsfiddle.net/tGtDv/1

Answer 1

Block elements can be centered by setting the margin left and right to auto.

div.container2 {
    margin-left: auto;
    margin-right: auto;
}

If you want to align center both horizontally as vertically, you need a different approach with a set width and height.

div.container2 {
    height: 200px;
    left: 50%;
    margin-left: -100px;
    margin-top: -100px;
    /* position: absolute; */
    position: fixed;
    top: 50%;
    width: 200px;
}

In this case, you position an element 50% to the left and 50% to the right of it’s parent element. Because HTML elements’ origin is in the top left, you have to shift it a little. That’s what the margins are for.