html 动态宽度高度,html – 垂直和水平中心块,动态宽度和高度

我需要在垂直和水平方向上居中一个元素,而元素不能有任何固定的尺寸.元素的内容不得受到影响……这意味着一些元素将保持文本对齐,其他元素将居中,它们可能是图像等.

蓝色块的宽度和高度根据内容和水平中心动态变化,工作正常.

但我现在需要做的是垂直居中蓝色块.

蓝色块不能有任何固定的尺寸,尽管红色块可以.

这是我的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：

My question

• Ligula Quam
• Condimentum Nullam Mollis
• Aenean
• Commodo Dolor Nibh Ligula Vulputate