Categories
css html vertical-alignment

How can I vertically align elements in a div?

990

I have a div with two images and an h1. All of them need to be vertically aligned within the div, next to each other. One of the images needs to be absolute positioned within the div.

What is the CSS needed for this to work on all common browsers?

<div id="header">
  <img src=".." ></img>
  <h1>testing...</h1>
  <img src="..."></img>
</div>

3

1062

Wow, this problem is popular. It’s based on a misunderstanding in the vertical-align property. This excellent article explains it:

Understanding vertical-align, or “How (Not) To Vertically Center Content” by Gavin Kistner.

“How to center in CSS” is a great web tool which helps to find the necessary CSS centering attributes for different situations.


In a nutshell (and to prevent link rot):

  • Inline elements (and only inline elements) can be vertically aligned in their context via vertical-align: middle. However, the “context” isn’t the whole parent container height, it’s the height of the text line they’re in. jsfiddle example
  • For block elements, vertical alignment is harder and strongly depends on the specific situation:
    • If the inner element can have a fixed height, you can make its position absolute and specify its height, margin-top and top position. jsfiddle example
    • If the centered element consists of a single line and its parent height is fixed you can simply set the container’s line-height to fill its height. This method is quite versatile in my experience. jsfiddle example
    • … there are more such special cases.

12

  • 178

    The problem with the “valid” solutions (so not the vertical-align: middle) is that you have to specify a fixed height. Not very possible for Responsive Web Design.

    – Emilie

    May 14, 2013 at 8:42


  • 1

    I had this structure: <div height=”##px”> My Text </ div> Worked for me set the property lineHeight using the same value as used in div height property: ‘##px’ (## because this value is dynamic in my case) thank you

    – patricK

    Aug 24, 2013 at 20:00

  • 8

    This also works with inline-block and table-cell elements. If you are having issues with this, try adjusting line-height of the container element (i.e. context) since it is used in the vertical-align line box calculations.

    – Alex W

    Oct 16, 2013 at 19:14

  • 2

    css-tricks.com/centering-css-complete-guide <– some good options presented here, have found myself resorting to the table/table-cell solution most of the time though

    Feb 21, 2016 at 1:20

  • 1

    This tool (howtocenterincsss.com) is pretty awesome because it worked right out of the box inside my existing CSS! That is super rare. Remember the old days where you had to copy entire stylesheets from some example, sometimes even the example HTML an then remove and rename elements one after each other until it’s what I needed. Not the case for this site!

    Apr 4, 2020 at 13:46

306

Now that Flexbox support is increasing, this CSS applied to the containing element would vertically center all contained items (except for those items that specify the alignment themselves, e.g. align-self:start)

.container {
    display: flex;
    align-items: center;
}

Use the prefixed version if you also need to target Internet Explorer 10, and older (< 4.4 (KitKat)) Android browsers:

.container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
}

4

  • A nice solution, thank you. Can you suggest how to make flexbox display a horizontal scrollbar, in case the inner element is bigger than the container? (I’m trying to make inner element zoomable/scrollable within the container, like canvas in powerpoint)? Is it possible at all?

    Nov 4, 2015 at 5:18

  • 1

    @YazidErman this solution depends on flexbox so no, only IE 10 and above support or any other modern browser caniuse.com/#search=flexbox Flexbox is great where it’s supported but that’s not everywhere. The display table and table cell is probably the best solution really, container just needs to be table, element being centered is wrapped an element with display table cell then can just center as some other answers here point out.

    Feb 21, 2016 at 1:16

  • 1

    Why was this so hard for me to find >.< thanks for the answer! Can confirm this is working for me in a scenario where other answer did not work.

    Apr 30, 2019 at 20:43

  • 1

    Useful CSS tricks guide on flexbox then look at the align-items section

    – icc97

    May 21, 2019 at 10:06

127

I used this very simple code:

div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }
<div class="ext-box">
    <div class="int-box">
        <h2>Some txt</h2>
        <p>bla bla bla</p>
    </div>
</div>

Obviously, whether you use a .class or an #id, the result won’t change.

1

  • 3

    Here’s a full example of all nine possibilities of alignments (top-middle-bottom and left-center-right): jsfiddle.net/webMac/0swk9hk5

    – webMac

    May 3, 2018 at 9:34