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.
Its really simple, we have a containing div that holds it all together and controls the main width for the progress bar. Inside Progressbar we have 6 divs total; 1 div is the progress meter bar and the other 5 are the div overlays for the squares.
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.
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">
/* 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+ */
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.