将li标签垂直放置在ul标签的中间

Question

我有一个ul标签，里面有height:300px和一些li标签。

<ul>
   <li> some text</li>
   <li> some other text</li>
</ul>

我想把这个列表垂直地放在ul标签的中间
我不想设置posittion:absolute。我测试了下面的css，但它不起作用！

ul{
  height: 300px;
  vertical-align: middle;
}
li{
  margin:auto;
}

请给我一些css！

Answer 1

这样？

CSS

ul {
    height: 300px;
    display: table-cell;
    vertical-align: middle;
    background-color: lime;
}
li {
    display: inline-block;
    background-color: fuchsia;
}​

演示

JSFiddle

Answer 2

这是我的解决方案，但它需要一个固定高度的附加元素（在本例中为300px）。然后允许UL元素默认为height: auto;，并通过隐藏的psuedo元素垂直对齐到中间。

jsfiddle：垂直对准中间的元素

伪元素位于包含元素的外部和左侧，并设置为vertical-align: middle;。

container:before {
  cotent: '';
  display: inline-block;
  width: 100%;
  height: 100%;
  margin-left: -100%;
  vertical-align: middle;
}

这允许容器的子元素与具有父元素高度的伪元素垂直对齐。