The tables have a vertical alignment property valign. How can divine content be centered vertically. Provided that the div is external, and the div with the contents does not have a constant height.

    4 answers 4

    Here is an example with explanations

      In CSS:

      vertical-align: middle; display: table-cell;

      Example: http://jsfiddle.net/zypz2/

      If you need support for IE below the eighth version, then add an internal element:

       margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");
      • This method is not supported by IE. - Frontender
      • @ Viktor Pavlov: Supported since IE 8. For IE7 treated with expression , the answer is updated. - Pavel Azanov
       <style type="text/css"> .align_center { position: relative; width: 100%; } .align_center:after { content: ''; display: block; clear: both; } .align_center_to_left { position: relative; right: 50%; float: right; } .align_center_to_right { position: relative; z-index: 1; right: -50%; } </style> <div class="align_center" style="border: 1px dashed red; color: red;"> Выравниваем относительно этого блока. <div class="align_center_to_left"> <div class="align_center_to_right" style="margin: 1em 0; border: 1px dashed green; color: green;"> Ширина блока зависит от&nbsp;размера надписи. </div> </div> </div> 
         <style> #outer { width: 50%; background: yellow; position: relative; height: 200px; } #inner { width: 50%; background: blue; position: absolute; top: 25%; left: 25%; height: 100px; } </style> <div id="outer"> <div id="inner"> </div> </div>

        Something like this?