What is this? From this page you can use the Social Web links to save Vertical Centering in CSS with Unknown Height (ie7 compatible) to a social bookmarking site, or the E-mail form to send a link via e-mail.

Social Web

E-mail

E-mail It
May 11, 2007

Vertical Centering in CSS with Unknown Height (ie7 compatible)

Posted in: Design

This article of jakpsatweb about vertical alignment is really the only solution I found out about this issue.

I take the Structural solution without Hack as reference, most of all becouse when an hack is not strictly neccesary it's better to avoid it.

Yuhu's code is great.

PLAIN TEXT
HTML:
  1. <div id="outer">
  2.   <div id="middle">
  3.     <div id="inner">
  4.       any text
  5.       any height
  6.       any content, for example generated from DB
  7.       everything is vertically centered
  8.     </div>
  9.   </div>
  10. </div>

PLAIN TEXT
CSS:
  1. #outer {
  2.       height: 400px;
  3.       overflow: hidden;
  4.       position: relative;
  5. }
  6.  
  7. #outer[id] {
  8.       display: table;
  9.       position: static;
  10. }
  11.  
  12. #middle {
  13.       position: absolute;
  14.       top: 50%;
  15. } /* for explorer only*/
  16.  
  17. #middle[id] {
  18.       display: table-cell;
  19.       vertical-align: middle;
  20.       position: static;
  21. }
  22.  
  23. #inner {
  24.       position: relative;
  25.       top: -50%
  26. } /* for explorer only */
  27.  
  28. /* optional: #inner[id] {position: static;} */

but it's not working on ie7, that catches [id] selectors but behaves as ie6.

so what?

according to css selectors we should write those css line more

PLAIN TEXT
CSS:
  1. *:first-child+html #outer[id] {
  2.     position:relative
  3. } /* for explorer 7 only */
  4.  
  5. *:first-child+html #middle[id] {
  6.     position: absolute;
  7.     display:block;
  8.     vertical-align:inherit;
  9.     top: 50%;
  10. } /* for explorer 7 only */
  11.  
  12. /* optional: *:first-child+html #inner[id] {position: relative;} */

have fun :)

Return to: Vertical Centering in CSS with Unknown Height (ie7 compatible)