Dynamically Center Div Within Div

Dynamically Center Div Within Div turned out to be a bit harder to accomplish with CSS than I wanted. I had to handle a case with internationalization where a div with text was contained in a div and need to be centered vertically. The catch was that the text could be from one line to multiple lines. This was the solution I found.

Html Code:

<div id="page">
 <div id="content_container">
   <div id="content">
     <p>your contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour content</p>
   </div>
 </div>
</div>

Css Code:

#content-outer {
 display:table;
 overflow:hidden;
 margin:0px auto; 
 height:100%;
 width:465px;
}

#content-inner {
 display:table-cell;
 vertical-align: middle;
}

html, body {
 height:100%;
}

Jsfiddle Here

If anyone has a better solution for dynamically vertically centering a div within a div I would love to hear it.

Div Border With Rounded Corners And Gradient Background

Getting a div to have rounded corners with CSS is not too difficult of a task. I came across a solution I would like to share quickly and briefly. Please note I found it only works in IE9, Firefox and Chrome. It’s really only a couple lines of CSS so lets’ take a look.

.roundedCorners {
   -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius: 10px;
}

By setting these 3 values, you get a pretty nice rounded edge. Now here is a weird edge case I came across. I used a gradient background through CSS in a div and in IE9 the gradient was not rounded off. So the fix for that was to surround it with a div and use an overflow: hidden to mask the colors.


<div class="roundedCorners mask">
    <div class=" roundedCorners gradientBackground">
    </div>
</div>

//CSS
.gradientBackground {
    /* for IE */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccc', endColorstr='#fff');
    
    /* for webkit browsers */
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff)); /* for webkit browsers */
    
    /* for firefox 3.6+ */
    background: -moz-linear-gradient(top,  #ccc,  #fff); /* for firefox 3.6+ */
}

.mask {
     overflow: hidden;
}

The above code properly rounded the corners of my div and provided a gradient with rounded corners as well in IE9, Firefox, and Chrome.  The rounded corners don’t work in older versions of IE.