在 div 中垂直居中 ul

Posted 2023-03-05

【中文标题】在 div 中垂直居中 ul

【英文标题】：Vertically center ul in div

【发布时间】：2013-04-11 07:50:35

【问题描述】：

这就是我的代码的样子。

#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 会有帮助吗？

【问题讨论】：

使用绝对定位，只有事先知道元素高度（或使用 javascript 测量），才能做到这一点。

我能做到。请给我一些更详细的信息好吗？

尝试添加：auto;到您的边距：0;

Using margin:auto to vertically align div 的可能重复项

您是否将其限制为仅 css，没有 javascript 解决方案？

【参考方案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>

【参考方案2】：

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

【参考方案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/

【讨论】：

你不认为我已经在寻找答案了吗？你的方法行不通。

@Banana 我知道这是个老问题，但你用的是什么浏览器？

经过大量研究，我确定此方法适用于 Opera、IE8+、Firefox、Chrome 和 safari。

【参考方案4】：

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

您知道容器的高度

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

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

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

您不知道容器的确切高度

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

More info here.

【讨论】：

我已经尽力解释为什么margin-top 不能是auto here - 以及比使用绝对定位更优雅的垂直居中内容的方式:)

【参考方案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);

);

【讨论】：

为了排除故障。在添加任何可能影响定位的其他内容之前，我会先尝试让基本解决方案工作。既然说 CSS 不能修改，那么你可以通过 jQuery 来删除它。

我的意思是我需要 CSS 是出于其他原因，并不是说几乎不可能删除它：D

-1，尽可能避免使用 javascript 进行样式设置 - 特别是当这可以使用 css 完成时，这是避免所谓的“无样式内容闪烁”的好习惯

是的，也许，但这是唯一真正在做我需要的事情。

我知道你所说的无样式内容的闪存是什么意思，但最终我认为这取决于内容的位置。 jQuery 内置了 CSS 功能，原因有很多，就像你说的“尽可能”不要使用 javascript，但在这种情况下，它可能是需要的。而且这个解决方案似乎正在奏效。