37

I am working with a div that is 100% of the parent divs height.

The div only contains a single line of text.

The div cannot have a fixed height.

So my question is.

How do I vertically center the line of text?

I have tried using:

display: table-cell;  
line-height:200%;

If it is important the div is absolutely positioned.

Current CSS
.requests {
    position: absolute;
    right: 0;
    height: 100%;
    width: 50px;
    padding: 0 10px;
    background-color: #69A4B5;
    display: table-cell;
    vertical-align: middle;
    border-bottom-right-radius: 5px;
}
Mateusz Piotrowski
  • 6,087
  • 9
  • 44
  • 71
Hailwood
  • 79,753
  • 103
  • 257
  • 412

13 Answers13

37

The best and easiest way to do it (currently in 2015 2020) is using flexbox:

.parent-selector {
    display: flex;
    align-items: center;
}

And that's it :D

Check-out this working example:

div {
    border: 1px solid red;
    height: 150px;
    width: 350px;
    justify-content: center;

    /* Actual code */
    display: flex;
    align-items: center;
}
<div>
    <p>Hola</p>
</div>

Old answer: You can use vertical-align: middle if you specify also display: table-cell;

.div {
    display: table-cell;
    vertical-align: middle;
}

Working example:

div {
  border: 1px solid red;
  height: 150px;
  width: 350px;
  text-align: center;
  
  /* Actual code */
  display: table-cell;
  vertical-align: middle;
}
<div>
    <p>Hola</p>
</div>

If it does not work you can try setting its parent as display: table;:

.parent-selector {
    display: table;
}

Edit: You have this method plus all the methods covered on this question in this other question: How do I vertically center text with CSS?

elboletaire
  • 4,023
  • 2
  • 31
  • 43
  • Yeah it depends on the layout.. maybe the best option is to set the wrapper to position: relative and the shape to position using position: absolute, as said by sarcastyx. Then you must play with the margins to finally align it properly. – elboletaire Apr 12 '12 at 14:18
  • There is another solution: using vertical-align: middle with line-height. But this solution is more for text lines and similar things... – elboletaire Apr 12 '12 at 17:21
  • 4
    It works only with fixed height, block don't react if I set 100% height. – Vedmant May 14 '14 at 08:19
  • 1
    Try to set the parent to `display: table`. – elboletaire May 14 '14 at 09:04
  • 1
    None of the others solutions worked with ionic. But this worked perfectly! +1 –  Mar 02 '16 at 17:09
27

This answer is no longer the best answer ... see the flexbox answer below instead!

To get it perfectly centered (as mentioned in david's answer) you need to add a negative top margin. If you know (or force) there to only be a single line of text, you can use:

margin-top: -0.5em;

for example:

http://jsfiddle.net/45MHk/623/

//CSS:
html, body, div {
    height: 100%;
}

#parent
{
    position:relative;
    border: 1px solid black;
}

#child
{
    position: absolute;
    top: 50%;
    /* adjust top up half the height of a single line */
    margin-top: -0.5em;
    /* force content to always be a single line */
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    text-overflow: ellipsis;
}

//HTML:
<div id="parent">
    <div id="child">Text that is suppose to be centered</div>
</div>​

The originally accepted answer will not vertically center on the middle of the text (it centers based on the top of the text). So, if you parent is not very tall, it will not look centered at all, for example:

http://jsfiddle.net/45MHk/

//CSS:
#parent
{
    position:relative;
    height: 3em;
    border: 1px solid black;
}

#child
{
    position: absolute;
    top: 50%;
}​ 

//HTML:
<div id="parent">
    <div id="child">Text that is suppose to be centered</div>
</div>​
gregjhogan
  • 1,997
  • 17
  • 19
  • +1 Good answer. If your jsfiddle is reasonably concise, consider duplicating the code in the answer, so it makes a better reference. – Jude Fisher Nov 07 '12 at 17:24
  • 4
    This doesn't answer the 100% div height requirement in the question – Onimusha Feb 04 '13 at 13:01
  • @Onimusha the `#parent` element in my example has a height of `3em` to make it easily visible that the original solution didn't actually vertically center a single line of text. The `#parent` height can be anything, so if you change it to `100%` the solution still works. – gregjhogan Mar 20 '13 at 01:49
8

Try this one http://jsfiddle.net/Husamuddin/ByNa3/ it works fine with me,
css

.table {
    width:100%;
    height:100%;
    position:absolute;
    display:table;
}
.cell {
    display:table-cell;
    vertical-align:middle;
    width:100%;
    height:100%:
}

and the html 

<div class="table">
    <div class="cell">Hello, I'm in the middle</div>
</div>
Husamuddin
  • 395
  • 1
  • 6
  • 18
6

Since it is absolutely positioned you can use top: 50% to vertically align it in the center.

But then you run into the issue of the page being bigger than you want it to be. For that you can use the overflow: hidden for the parent div. This is what I used to create the same effect:

The CSS:

div.parent {
    width: 100%;
    height: 300px;
    position: relative;
    overflow: hidden;
}
div.parent div.absolute {
    position: absolute;
    top: 50%;
    height: 300px;
}

The HTML:

<div class="parent">
    <div class="absolute">This is vertically center aligned</div>
</div>
sarcastyx
  • 2,179
  • 16
  • 16
  • I suspect you could remove the overflow:hidden if you removed the height:300px from the absolute div. – david Jan 21 '11 at 00:19
  • You could, but then the absolute positioned div is not 100% height of the parent div. Which is what, I am presuming, the author has. – sarcastyx Jan 21 '11 at 00:45
  • @sarcastyx I've tried you solution with floated elements and position:relative, but it just pushes the content to the bottom! also, part the content disappears because of the hidden overflow. ay ideas? – Samia Ruponti Jul 11 '12 at 19:05
  • @Snowbell92, this answer is more catered for the scenario in the OP's question. If you can give me more of an idea what you are trying or what you have, then I could give you an better answer. – sarcastyx Jul 13 '12 at 02:23
  • @sarcastyx should I post a new question? I was trying to do something like this : I have a three col layout, the columns are floated and I want to have a block ( the logo actually) vertically centered inside the div. the div also has 100% height. thanks for your help. – Samia Ruponti Jul 23 '12 at 16:58
  • @Snowbell92, maybe you should ask your question separately and link to this answer mentioning that you have tried this but id did not work. We will have to see the HTML and the styles to understand why it is not working. – sarcastyx Jul 27 '12 at 05:21
3

I disagree, here's a JS free solution, which works:

<html style="height: 100%;">
    <body style="vertical-align: middle; margin: 0px; height: 100%;">
        <div style="height: 100%; width: 100%; display: table; background-color: #ccc;">
            <div style="display: table-cell; width: 100%; vertical-align: middle;">
                <div style="height: 300px; width: 600px; background-color: wheat; margin-left: auto; margin-right: auto;">A</div>
            </div>
        </div>
    </body>
</html>
user1514042
  • 1,830
  • 7
  • 30
  • 48
3

Even though this question is pretty old, here's a solution that works with both single and multiple lines that need to be centered vertically (could easily be centered both vertically & horizontally as seen in the css in the Demo.

HTML

<div class="parent">
    <div class="child">Text that needs to be vertically centered</div>
</div>


CSS

.parent {
    position: relative;
    height: 400px;
}

.child {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
mkmllr
  • 35
  • 6
1

If you know how tall your text is going to be you can use a combination of top:50% and margin-top:-x px where x is half the height of your text.

Working example: http://jsfiddle.net/Qy4yy/

david
  • 16,020
  • 4
  • 40
  • 57
1

just wrap your content with a table like this:

  <table width="100%" height="100%">
         <tr align="center">
               <th align="center">
                 text
               </th>
          </tr>
  </table><
jcfrei
  • 1,797
  • 4
  • 17
  • 34
0

Setting the line height to the same as the height of the div will cause the text to center. Only works if there is one line. (such as a button).

nunny
  • 1
0

Modern solution - works in all browsers and IE9+

caniuse - browser support.

.v-center {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

Example: http://jsbin.com/rehovixufe/1/

AntonB
  • 2,325
  • 1
  • 25
  • 36
0

have you tried line-height:1em;? I recall that that's the way to get it to center vertically.

Yevgeny Simkin
  • 26,055
  • 37
  • 127
  • 228
0

Did you try vertical-align: middle ???

You can find more info on vertical-align here: http://www.w3schools.com/css/pr_pos_vertical-align.asp

Wagner Silveira
  • 1,568
  • 11
  • 9
0

Vertical align, dynamic height combined with absolute position is except some special conditions not possible without a few lines of JS (eg. jQuery). (can possibly be solved with backend code in some cases, or min-height combined with sensible top or margin styles, but not perfect)

I mostly only use absolute position when something is supposed to "popup" in relation to something else which is in the float, I think that's the best way to use it so you don't have to fiddle with things like this.

No offense, but most answers in here are way off.

plebksig
  • 539
  • 5
  • 20