Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Unfortunately — but not surprisingly — the solution is more complicated than one would wish it to be. Also unfortunately, you'll need to use additional divs around the div you want vertically centered.</p> <p>For standards-compliant browsers like Mozilla, Opera, Safari, etc. you need to set the outer div to be displayed as a <em>table</em> and the inner div to be displayed as a <em>table-cell</em> — which can then be vertically centered. For Internet Explorer, you need to <em>position</em> the inner div <em>absolutely</em> within the outer div and then specify the <em>top</em> as <em>50%</em>. The following pages explain this technique well and provide some code samples too:</p> <ul> <li><a href="http://www.jakpsatweb.cz/css/css-vertical-center-solution.html" rel="nofollow noreferrer">Vertical Centering in CSS</a></li> <li><strike><a href="http://www.laboratoriocaffeina.it/design/2007/05/11/vertical-centering-in-css-with-unknown-height-ie7-compatible.html" rel="nofollow noreferrer">Vertical Centering in CSS with Unknown Height (Internet&nbsp;Explorer&nbsp;7 compatible)</a></strike> (no longer live)</li> <li><a href="http://web.archive.org/web/20101107022613/http://www.laboratoriocaffeina.it/design/2007/05/11/vertical-centering-in-css-with-unknown-height-ie7-compatible.html" rel="nofollow noreferrer">Vertical Centering in CSS with Unknown Height (Internet&nbsp;Explorer&nbsp;7 compatible)</a> (Archived article courtesy of the Wayback Machine)</li> </ul> <p>There is also a technique to do the vertical centering using JavaScript. <a href="http://www.alistapart.com/d/footers/footer_variation1.html" rel="nofollow noreferrer">Vertical alignment of content with JavaScript &amp; CSS</a> demonstrates it.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload