Center vertically a unknown height text in a unknown height div

Question

I know this is a common issue, and I've already asked a similar one. But I could not find the solution this time. I am trying to vertically center a text which can have different height in a DIV which can have different height. And I am trying to solve this only with CSS, without touching the HTML.

Example : http://jsfiddle.net/F8TtE/

 <div id="test">
    <div id="sumup">

        <h1 class="titre">Title</h1>
        <div id="date">hello guys</div>
    </div>
 </div>

My goal is to have the text centered vertically and horizontally whatever its size.

similar issue with solution can be found [here](http://stackoverflow.com/questions/19788670/cant-vertically-alignmiddle-absolutely-positioned-block-text#19789090) — Mahmoud, Nov 05 '13 at 14:21
Here is an awesome reference -- http://css-tricks.com/centering-in-the-unknown/ . This solution is using the `:before` CSS "*pseudo-element*". — Ian Campbell, Nov 05 '13 at 14:27
@Mahmoud The linked Q/A hardly answers this question : *"without touching the HTML"* and *"whatever its size"* — Denys Séguret, Nov 05 '13 at 14:47

Denys Séguret · Accepted Answer · 2015-09-02T07:23:10.660

19

Here it is :

#test {
    text-align:center;
}
#test::before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
#sumup {
    display: inline-block;
    vertical-align: middle;
}

#test {
    height : 180px;
    text-align:center;
    background: yellow;
}

#sumup {
    background-color: #123456;
}

#test:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
  #sumup {
    display: inline-block;
    vertical-align: middle;
  }

<div id="test">
  <div id="sumup">
   
   <h1 class="titre">Title</h1>
   <div id="date">hello guys</div>
  </div>
</div>

EDIT: It's now 2015 and thankfully the web changes. Assuming you don't support obsolete browsers, it's usually simpler and cleaner to vertically center elements with the Flex model.

#test {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#test {
    height : 180px;
    background: yellow;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#sumup {
    background-color: #123456;
}

<div id="test">
  <div id="sumup">
   <h1 class="titre">Title</h1>
   <div id="date">hello guys</div>
  </div>
</div>

edited Sep 02 '15 at 07:23

answered Nov 05 '13 at 14:21

Denys Séguret

372,613
87
782
758

1

I've used the table/table-cell method for a while now, but this... this is just magic. – Nahydrin Nov 05 '13 at 14:35
1

Every answer on the web does this. The OP said "in a DIV which can have different height", meaning the height of the parent div can't be a set measurement. – Shawn Erquhart Feb 28 '14 at 21:41
With percentage height on the parent element this do not work. Anyone know another way? – Edmundo Santos Mar 27 '14 at 12:59
1

This is the proper solution. I have been searching for quite a while but this is perfect. – Maverick Jun 24 '15 at 12:52
In reference to the 2015 edit, I think most developers still want to support IE 9 and 10, [flex](http://caniuse.com/#search=flex) complicates things a bit. – turbopipp Oct 27 '15 at 11:00
can anyone explain why this works? I'm so curious :) – carinlynchin Mar 10 '16 at 00:16

score 2 · Answer 2 · answered Nov 05 '13 at 14:25

Here's another way using display:table-cell since I don't quite understand how dystroy's answer works.

#test {
    width:100%;
    height : 400px;
    display:table;
}

#sumup {
    width : 100%;

    height : 100%;
    background-color: #123456;
    display:table-cell;
    vertical-align:middle;
}

http://jsfiddle.net/F8TtE/3/

score 0 · Answer 3 · answered Nov 05 '13 at 14:25

0

CSS with display solution:

#test {
  display:table; 
}

#sumup {
  display:table-cell; 
}

The Demo http://jsfiddle.net/F8TtE/7/

answered Nov 05 '13 at 14:25

DaniP

37,813
8
65
74

Center vertically a unknown height text in a unknown height div

3 Answers3

Linked