Center both horizontally and vertically with variable size, maxing 1000px width/height;

Question

I am trying to center vertically and horizontally an image with variable width and height, maxing at 1000px. I archived vertical center but I am unable to add horizontal center without breaking vertical... Here is my code:

<div style="margin-left:auto;margin-right:auto;width:70%;height:1000px;width:1000px;">
    <div style="display:table-cell;vertical-align:middle;height:1000px;width:1000px;">
        <img src="images/a.png">
    </div>
</div>

See this answer: http://stackoverflow.com/questions/19843811/how-to-center-div-that-contains-an-image-within-a-div/19844070#19844070 — Josh Crozier, Nov 09 '13 at 20:12
Great, but I need to do this without touching the body/html. — ShadowHero, Nov 09 '13 at 20:17
Sadly is not, and if I change it, many things will not work correctly... :/ — ShadowHero, Nov 09 '13 at 20:23
Show me an example and I will make it work. The height is just defined as there would otherwise not be a height, and thus, height:100% on the child would = 0px... Like I said, provide some sort of jsfiddle, and I will make it work without effecting the layout. — Josh Crozier, Nov 09 '13 at 20:24
See my similar answer http://stackoverflow.com/a/13356401/1057730 — Vladimir Starkov, Nov 09 '13 at 20:36

score 1 · Accepted Answer · answered Nov 09 '13 at 20:25

1

Just add text-align: center; to outer div.

JSFiddle

answered Nov 09 '13 at 20:25

Tigran Petrossian

1,158
1
7
16

Center both horizontally and vertically with variable size, maxing 1000px width/height;

1 Answers1