在 div 中垂直居中 ul

Question

这就是我的代码的样子。

#container {
  width: 584px;
  height: 50px;
  position: relative;
  overflow: hidden;
}

#container ul {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 3504px;
}

#container ul li {
  width: 584px;
  float: left;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

<div id="container">
   <ul>
      <li>...</li>
      <li>...</li>
      <li>...</li>
   </ul>
</div>

正如标题所说，我想让 ul 在 div 内垂直居中。我无法更改上述 CSS 规则，因为。我一直在谷歌搜索解决方案并试图找到一种方法，但一切似乎都与我已有的规则相冲突。

知道怎么做吗？

如果我使用具有一行和一列的表格而不是 #container div 会有帮助吗？

Answer 1

您可以使用flex 使您的ul 中心垂直、水平或两者都喜欢

.container{
  background:#f00;
  height:150px;
  display:flex;
  align-items:center;
  /*justify-content:center;=>will make ul center horizontal*/
}
.container ul{
  background:#00f;
}

<div class="container">
  <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
  </ul>
</div>

Answer 2

现在您可以让父容器 display:flex 和 align-items:center。那应该行得通。虽然旧版浏览器不支持 flexbox 属性。

Answer 3

请以后使用搜索功能。完整答案解释here；这是您的方案的代码：

.container {
  display: table;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;}
.helper {
  #position: absolute; /*a variation of an "lte ie7" hack*/
  #top: 50%;
  display: table-cell;
  vertical-align: middle;}
ul{
  #position: relative;
  #top: -50%;
  margin:0 auto;
  width:200px;}

这三个元素必须像这样嵌套：

<div class="container">
  <div class="helper">
    <ul><!--stuff--></ul>
  </div>
</div>

http://jsfiddle.net/ovfiddle/yVAW9/

Answer 4

在 CSS 中“垂直居中”div 或其他容器非常棘手，这里有您的选择。

您知道容器的高度

如果您知道容器的高度，您可以执行以下操作：

#container {
    position: absolute;
    top: 50%;
    margin-top: -half_of_container_height_here;
}

所以我们基本上放在中间，然后使用等于高度一半的 负 边距来偏移它。你的父容器需要有position: relative。

您不知道容器的确切高度

在这种情况下，您需要使用 JavaScript 并计算适当的边距（不幸的是，您不能使用 margin-top: auto 或类似的东西）。

More info here.

Answer 5

如果你可以添加 jQuery 库你可以试试这个，

$(document).ready(function(){

    // Remove li float
    $("#container ul li").css("float", "none");

    // Get the full height of the UL
    var ulheight = $("#container ul li")[0].scrollHeight;

    // Based on the height of the container being 50px you can position the UL accordingly
    var pushdown = (50-ulheight)/2;
    $("#container ul li").css("top", pushdown);

});