Central unit vertically and horizontally with dynamic width and height

Question

I need to center the element both vertically and horizontally, and the element cannot have fixed sizes. The content of the element should not be affected ... which means that some elements will be aligned with the text on the left, others in the center, they can be images, etc. Etc.

Here where I am now: http://jsfiddle.net/Shpigford/BUbmz/

The width and height of the blue block dynamically changes based on the content and the horizontal centers, which works great.

But what I now need to do is center the blue block vertically.

The blue block cannot have fixed sizes, although the red block can.

Here is my CSS:

section { width: 500px; height: 300px; background: red; } .options { display:table; margin: 0 auto; background: blue; } h2 { text-align: center; margin: 0; padding: 0; } ul { margin: 0; padding: 0; text-align: center; } li { text-align: left; } 

And HTML:

 <section> <div class="options"> <h2>My question</h2> <ul> <li>Ligula Quam</li> <li>Condimentum Nullam Mollis</li> <li>Aenean</li> <li>Commodo Dolor Nibh Ligula Vulputate</li> </ul> </div> </section> 

Answer 1

Here's a solution for centering DIVs vertically, with backups for different browsers, including older versions of IE.

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

[edit]

Translation, your violin will look like this:

http://jsfiddle.net/GolezTrol/BUbmz/1/