Question

这就是我的代码。

HTML

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

CSS

#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;
}

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

知道怎么做吗？

如果我使用一个包含一行和一列的表来代替#container div，会有用吗？

Answer 1

将来请使用搜索功能。完整答案解释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 2

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

您知道容器的高度

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

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

因此我们基本上放在中间，然后使用等于高度一半的负边距来抵消它。您的父容器需要position: relative。

您不知道容器的确切高度

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

More info here

Answer 3

如果你可以添加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);

});

Answer 4

您可以使用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 5

现在您可以显示父容器：flex和align-items：center。这应该工作。虽然旧浏览器不支持flexbox属性。

在div中垂直居中ul

5 个答案: