Inline CSS Centering Not Working

Question

I'm using this awesome site as a guide to inline CSS centering and am confused why most of it isn't working. The newer flexbox style only centers horizontally, not vertically:

<div style="display:flex;justify-content:center;align-items:center;">
  <img src="https://66.media.tumblr.com/bac96f9db0dd31f09bad7f05db7e13c4/tumblr_o74utbKePP1u5sqevo1_500.gif"></img>
</div>

Whereas the legacy version for IE isn't working at all:

<div style="display:table;">
  <div style="display:table-cell;vertical-align:middle;">
    <div style="margin-left:auto;margin-right:auto;">
      <img src="https://66.media.tumblr.com/bac96f9db0dd31f09bad7f05db7e13c4/tumblr_o74utbKePP1u5sqevo1_500.gif"></img>
    </div>
  </div>
</div>

Any ideas what the issue is? FYI, example image contains Orphan Black spoilers :)

So you want the image fully centered on your screen. Horizontally and vertically? — Stivan, May 16 '16 at 16:57

dippas · Accepted Answer · 2016-05-16T17:35:04.107

2

with flexbox you need to set height

NOTE

<img> is a self-closing tag so you don't need to do </img> but instead />

body {
  margin: 0
}
div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh
}

<div>
  <img src="https://66.media.tumblr.com/bac96f9db0dd31f09bad7f05db7e13c4/tumblr_o74utbKePP1u5sqevo1_500.gif" />
</div>

regarding to CSS tables you need to set height in order to vertical-align:middle work, and add display:block, margin:auto to img to get it centered horizontally

body {
  margin: 0
}
div:first-of-type {
  display: table;
  width: 100vw;
  height: 100vh
}
div:last-of-type {
  display: table-cell;
  vertical-align: middle
}
img {
  display: block;
  margin: auto
}

<div>
  <div>
    <img src="https://66.media.tumblr.com/bac96f9db0dd31f09bad7f05db7e13c4/tumblr_o74utbKePP1u5sqevo1_500.gif" />
  </div>
</div>

edited May 16 '16 at 17:35

answered May 16 '16 at 17:09

dippas

58,591
15
114
126

Thanks! So much for that site I described as "awesome." It explicitly says you don't have to specify the size, although in this case I'm just using 100% for each (figured % is better than vh since I'd rather have it centered in the window than viewport). But any idea how to do this in anything below IE10? Someone said I need to set position to relative for both the img and the divs, but it makes no difference for me. – Sophia Gold May 16 '16 at 17:35
I've just updated my answer with regards to your second example ( I took awhile because I was caught up with work), and I just used `vh` for the sake of easiness to demo. – dippas May 16 '16 at 17:36
1

@Sophia take a look at this [question](http://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically/19027949#19027949), it might help you understand a few things – dippas May 16 '16 at 18:01
Sorry to keep with the questions, but is there a way to make this second method work with `position: absolute`? I'm using a framework to render canvas elements that need to sit directly on top of each other for compositing with alpha channels so if I use relative positioning that obviously doesn't work. – Sophia Gold May 16 '16 at 18:04
I'm pretty that's doable but I would need to see the code to help you better – dippas May 16 '16 at 18:07
It's too complicated to paste here, but something like [this](http://sretaeper.ucoz.com/stalker_Ractive/) except with the canvases positioned on top of one another. It's really no different than the example I used here. I just need absolute positioning and unless I'm missing something none of the techniques shown here work with that. – Sophia Gold May 16 '16 at 18:51
Except flexbox, of course. That's _so_ much better if I don't care about 1:200 users. – Sophia Gold May 16 '16 at 18:53
Now that I'm playing around with it more, it's not about the framework at all. I get the same issues using absolute positioning with your flexbox demo :/ – Sophia Gold May 16 '16 at 20:39
@sophia im not at the computer now but I'll see that ASAP. – dippas May 16 '16 at 20:41
No worries! Can't complain about free help :) – Sophia Gold May 16 '16 at 20:43
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/112088/discussion-between-dippas-and-sophia). – dippas May 16 '16 at 21:19

score 0 · Answer 2 · answered May 16 '16 at 17:12

0

It's working man. All you have to do is to specify the height of the parent div. Say for the 100% viewport height , you have to set it to 100vh.

Code Example

<div style="display:flex;justify-content:center;align-items:center;height: 100vh;
">

answered May 16 '16 at 17:12

Shuvo Habib

2,035
1
20
25

score 0 · Answer 3 · answered May 16 '16 at 17:14

The div containing the image sizes itself to the image height so vertical centering is irrelevant. Give that div an explicit height larger than the image height and the Flexbox version will work fine. Not sure about the fallback.

Like so: <div style="display:flex;justify-content:center;align-items:center;height:800px;">

See here: http://codepen.io/SteveClason/pen/GZaoZZ

Inline CSS Centering Not Working

3 Answers3

NOTE