css - 将 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;，并通过隐藏的伪元素垂直对齐到中间。

jsfiddle：元素垂直对齐到中间

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

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

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