69

With only the parent div and the child img elements as demonstrated below how do I vertically and horizontally center the img element while explicitly not defining the height of the parent div?

<div class="do_not_define_height">
 <img alt="No, he'll be an engineer." src="theknack.png" />
</div>

I'm not too familiar with flexbox so I'm okay if flexbox itself fills up the full height, but not any other unrelated properties.

Improve this question

2 Answers 2

Reset to default
137

Just add the following rules to the parent element:

display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */

Here's a sample demo (Resize window to see the image align)

Browser support for Flexbox nowadays is quite good.

For cross-browser compatibility for display: flex and align-items, you can add the older flexbox syntax as well:

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
Improve this answer
10
  • That defines height, I explicitly stated I can not define height except for flexbox.
    – John
    Commented Sep 14, 2014 at 10:40
  • 1
    @John - no it doesn't define a height - the height in the fiddle is only there for testing .... when you resize the window you can see the height of the container changing and the img is still centered. You can remove the height rule and it will work for whatever the height of the container is.
    – Danield
    Commented Sep 14, 2014 at 10:42
  • @John - No! In your forked fiddle the height of the parent div is the height of the image!!! so obviously it won't align. In order to center the image it must be within a container with a greater width and height than the image.
    – Danield
    Commented Sep 14, 2014 at 10:48
  • 1
    @John No! the height of the container could be anything just as long as it is greater than the image. Plug in any value you want for height and flexbox will center it.
    – Danield
    Commented Sep 14, 2014 at 10:57
  • 1
    I figured it out and posted an answer. I hate spending time helping people to get snubbed off so I'm giving you +1 for your time. Thank you!
    – John
    Commented Sep 14, 2014 at 11:26
34

Without explicitly defining the height I determined I need to apply the flex value to the parent and grandparent div elements...

<div style="display: flex;">
<div style="display: flex;">
 <img alt="No, he'll be an engineer." src="theknack.png" style="margin: auto;" />
</div>
</div>

If you're using a single element (e.g. dead-centered text in a single flex element) use the following:

align-items: center;
display: flex;
justify-content: center;
Improve this answer
4
  • Interested in centering an image both vertically and horizontally w/out explicitly setting a height on its parents. I have a series of image and want the height of the tallest image to be the height of the parent and center all other sibling images. It looks like you might have something here, do you have a demo?
    – Steve
    Commented Apr 21, 2015 at 1:24
  • Hi Steve, I'll post something on my site (see profile) tonight for you, just keep in mind I'll be home late.
    – John
    Commented Apr 21, 2015 at 13:25
  • Hey John, no worries, whenever you can post it, I appreciate it buddy! Thanks in advance!
    – Steve
    Commented Apr 21, 2015 at 16:34
  • 1
    @Steve Better late than never? jabcreations.com/blog/… Also there are some issues with older browsers (e.g. Safari 5 and IE) where they go by the older model.
    – John
    Commented Jul 29, 2015 at 17:47

Not the answer you're looking for? Browse other questions tagged or ask your own question.