Css: Vertically Align Div When No Fixed Size of the Div Is Known

CSS: Vertically align div when no fixed size of the div is known

This is a pure CSS2 solution for horizontally and vertically centering without known sizes of either container nor child. No hacks are involved. I discovered it for this answer and I also demonstrated it in this answer.

The solution is based on vertical-align: middle in conjunction with line-height: 0, which parent has a fixed line-height.

The HTML:

<span id="center">
<span id="wrap">
<img src="http://lorempixum.com/300/250/abstract" alt="Sample Image" />
</span>
</span>

And the CSS:

html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
#center {
position: relative;
display: block;
top: 50%;
margin-top: -1000px;
height: 2000px;
text-align: center;
line-height: 2000px;
}
#wrap {
line-height: 0;
}
#wrap img {
vertical-align: middle;
}

Tested on Win7 in IE8, IE9, Opera 11.51, Safari 5.0.5, FF 6.0, Chrome 13.0.

The only caveat is IE7, for which the two innermost elements have to declared at one line, as demonstrated in this fiddle:

<span id="center">
<span id="wrap"><img src="http://lorempixum.com/300/250/abstract" alt="Sample Image" /></span>
</span>

Note that the span's are also required for IE7. In every other browser, the span's may be div's.

Vertical align div to unknown height div without affecting horizontal centering

You should use display: flex and align-items, its also important to pass a min-height to your container.

I have created a quick fiddle to explain what I understood from you.

Take a look at this (JSFiddle):

.container {  width: 300px;  padding-bottom: 20px;  padding-top: 20px;  border: solid 1px red;  display: flex;  align-items: center;  justify-content: center;  min-height: 30px;}
.inner { background: rgba(0, 0, 0, 0.5); width: 50%;}
.fixed { position: fixed; left: 20px; border: solid 1px blue; height: 30px;}
<div class="container">  <div class="inner">    Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum  </div>  <div class="fixed">    fixed  </div></div>

Vertical alignment without knowing height in CSS?

Use padding top , padding bottom to center elements vertically , with or without height definitions ...

css vertically centering a fixed positioning div

Alternatively, you could try this (only works if you know the height of the image):

#image{
position:relative;
height:600px;
top: 50%;
margin-top: -300px; /* minus half the height */
border:1px solid grey;
}

How can I vertically align elements in a div?

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.

Vertically centering a div inside another div

tl;dr

Vertical align middle works, but you will have to use table-cell on your parent element and inline-block on the child.

This solution is not going to work in IE6 & 7.
Yours is the safer way to go for those.
But since you tagged your question with CSS3 and HTML5 I was thinking that you don't mind using a modern solution.

The classic solution (table layout)

This was my original answer. It still works fine and is the solution with the widest support. Table-layout will impact your rendering performance so I would suggest that you use one of the more modern solutions.

Here is an example


Tested in:

  • FF3.5+
  • FF4+
  • Safari 5+
  • Chrome 11+
  • IE9+

HTML

<div class="cn"><div class="inner">your content</div></div>

CSS

.cn {
display: table-cell;
width: 500px;
height: 500px;
vertical-align: middle;
text-align: center;
}

.inner {
display: inline-block;
width: 200px; height: 200px;
}

Modern solution (transform)

Since transforms are fairly well supported now there is an easier way to do it.

CSS

.cn {
position: relative;
width: 500px;
height: 500px;
}

.inner {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 200px;
}

Demo


♥ my favourite modern solution (flexbox)

I started to use flexbox more and more its also well supported now Its by far the easiest way.

CSS

.cn {
display: flex;
justify-content: center;
align-items: center;
}

Demo

More examples & possibilities:
Compare all the methods on one pages

How to set div in center vertically and horizontally where height is not known?

it is not possible to vertically center a block with this technique, only horizontal centering is allowed
try this css code to get a vertical and horizontal centering:

login-form {
width: 35%;
margin: auto;
margin-top: 50vh; /*allow us to push the login-form into the half of the viewport */
transform: translateY(-50%);

/the login-form will shoot the half of his own height/
}

hope this will work for you
good luck



Related Topics



Leave a reply



Submit