Question

I am trying to vertically and horizontally center a container, and the content inside using CSS.

The markup looks like this:

<div id="container">
  <img src="..someimage.jpg">
  <img src="..someverticaldivider">
  <form action="action.php">
    <input type="text">
    .... (other inputs)
  </form>
</div>

I need the end result to look like this:

So far, my css looks like this:

#content{
     position:absolute;
     width: 900px; 
     left:50%;
     top:50%;
     height:300px;
     margin-top:-150px;
     margin-left: -450px; 

}

That works fine and if I add a border to #content, I can easily see that it is indeed centered horizontally and vertically.

The problem I am facing is that I do not know the size of the content inside #content. I need to be able to align those elements 2 images and 1 form horizontally and vertically. I have checked out this site for vertically centering, but the problem is that I do not know the size of my content, and the content is not only text.

What is the best way to do this with support for older browsers (IE7 and up)?

Answer 1

---

edit 1
And here is the the final result of the jury
This centers also the content inside the box vertically (image, vertical ruler, form)
http://jsfiddle.net/HerrSerker/TuPvF/13/

---

I’m trying to give an authoritative answer to this.
Maybe this won’t work in mobile browsing (smart phones, iPad etc.). Could anyone check?

Use display: table and display: table-cell in modern browsers which support them to make use of the vertical-align which works with them.

Use positioning with relative measures in some old IE browsers

http://jsfiddle.net/HerrSerker/TuPvF/

---

<!-- HTML -->
<div class="table">
    <div class="cell">
        <div class="inner">
            <div class="align">
                <img src="//lorempixel.com/200/300">
            </div>
            <div class="align">
                <img src="//lorempixel.com/200/200">
            </div>
        </div>
    </div>
</div>

---

/* all css rules prepended by a hash sign (#) are specifically for IE 7 and below */

html, body {
     /* w3c dropped height percentage in some css2 or so version 
      * if you don't know the heights of ALL the parent element up to the root.
      * So give ALL parents a known height
      * CAVE: If mobile browsing is important check, if this does not affect scrolling and zooming
      */
    height: 100%; 
}
.table{
    /* modern browsers support display: table
     * use this for an easy vertical alignment
     */
    height: 100%;
    width: 100%;
    display: table;
    /* check if you want absolute positioning */
    position: absolute;
    /* if you don't want absolute positioning, uncomment the next line and comment the previous line out */
    /* #position: relative */ 
}
.table > .cell {
     /* modern browsers support display: table-cell
     * use this for an easy vertical alignment
     * You don't need table-row
     */     
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    /* this is again for lte IE7 */
    #position: absolute;
    /* 50% is half of the containing element (.table here) */
    #top: 50%;
    #width: 100%;
}
.cell > .inner {
    text-align: left;
    display: inline-block;
    /* triggers hasLayout in IE 6+7 */    
    #zoom: 1;
    /* if IE 6+7 element have hasLayout, display: inline behaves as display: inline-block. Strange, huh?  */
    #display: inline;
    #position: relative;
    /* here the 50% are the half of the .cell element */
    #top: -50%;
}
.cell > .inner > .align {
    vertical-align: middle;
    display: inline-block;
    #zoom: 1;
    #display: inline;
}


.inner {
    border: 1px solid gold;
    padding: 10px;
    white-space: nowrap;
}