html - 在 DIV 内垂直居中 UL

Question

我有以下内容:

<div style="background: Red; height: 100px;">
  <ul>
    <li><a href="/">Home</a></li>
  </ul>
</div>

我想将 ul 在 div 中垂直居中，但我不确定该怎么做。 Fiddle demo谁能就此给我建议。

马里卢

Answer 1

您始终可以将 display: table-cell; 与 vertical-align: middle; 结合使用:

HTML:

<div>
  <ul>
    <li><a href="/">Home</a></li>
  </ul>
</div>

CSS:

div {

    background: red;
    height: 100px;
    width: 500px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;

}

See working jsFiddle demo