我需要在垂直和水平方向上居中一个元素,而元素不能有任何固定的尺寸.元素的内容不得受到影响……这意味着一些元素将保持文本对齐,其他元素将居中,它们可能是图像等.
这就是我现在的位置：http://jsfiddle.net/Shpigford/BUbmz/
蓝色块的宽度和高度根据内容和水平中心动态变化,工作正常.
但我现在需要做的是垂直居中蓝色块.
蓝色块不能有任何固定的尺寸,尽管红色块可以.
这是我的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;
}
和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>
解决方法
这是一个垂直居中DIV的解决方案,包括各种浏览器的后备,包括旧的IE版本.
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
[编辑]
翻译过来,你的小提琴就像这样：
