How to center element vertically?

Question

This question perhaps was asked before, but my case is somehow special.

I have two divs one inside the other. Both divs heights are unknown, but what I can tell about the outer div is its minimal height. The point is - I want the smaller div to center vertically inside the outer div if the inner div is smaller than the outer. And I want the inner div to expand the outer div if it is bigger than the minimal height of the outer div.

I would like to achieve this without using any scripts.

Is it even possible?

Sample code:

<div id="outer" style="min-height:50px;">
   <div id="inner">
       Im here, I could be short, I could be long 
       and if I wrap - i could be tall
   </div> 
</div>

Yes.. Now what have you tried. Stack Overflow is not a code writing service. — Paulie_D, Sep 26 '15 at 20:13
Not possible without script. Also please provide sample code so that we can see and make changes. — Prince Sodhi, Sep 26 '15 at 20:26

score 1 · Answer 1 · answered Sep 26 '15 at 20:47

1

You can do this using flexbox. Check out this jsFiddle

#outer {
    display: flex;
    align-items: center;
    justify-content: center;
}

Here is a useful guide to Flexbox

answered Sep 26 '15 at 20:47

Jackson

3,476
1
19
29

score 1 · Accepted Answer · answered Sep 26 '15 at 20:49

Use display: table, display: table-cell, and vertical-align: middle. Boom.

Live Demo:

.outer {
  display: table;
  min-height: 70px;
  background-color: #BBB;
  margin: 10px;
}
.inner {
  display: table-cell;
  vertical-align: middle;
}

<div class="outer">
  <div class="inner">
    Im here, I could be short, I could be long and if I wrap - i could be tall
  </div>
</div>

<div class="outer">
  <div class="inner">
    <p>Im here, I could be short, I could be long</p>
    <p>and if I wrap - i could be tall</p>
    <p>Im here, I could be short, I could be long</p>
    <p>and if I wrap - i could be tall</p>
  </div>
</div>

score -1 · Answer 3 · answered Sep 26 '15 at 20:26

-1

Basically, without any script(JS/Jquery) it's not possible. With only css you can't say the smaller div to put inside the other and align it vertically.

As you said in your question, the keyword "if" explains itselfs. For what you want, you have to use some script code. Css can only declare the styles of the elements, not the conditions of one about the other.

answered Sep 26 '15 at 20:26

Adrian Ghinea

355
1
2
7

1

This is 100% possible without JS. Please see the other two answers to this question. – Maximillian Laumeister Sep 26 '15 at 21:03

How to center element vertically?

3 Answers3