Html 垂直居中

这就是我的代码的样子

#容器{
宽度：584px；
高度：50px；
位置：相对位置；
溢出：隐藏；
}
#集装箱保险{
位置：绝对位置；
保证金：0；
填充：0；
宽度：3504px；
}
#集装箱保险箱{
宽度：584px；
浮动：左；
保证金：0；
填充：0；
溢出：隐藏；
}

如果您可以添加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中，垂直“居中”一个

div

或其他容器是相当棘手的，下面是您的选项

您知道容器的高度

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

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

我们基本上放在中间，然后用一个等于一半高度的负余量来抵消它。父容器需要有

位置：相对

您不知道容器的确切高度

在这种情况下，您需要使用JavaScript并计算适当的边距（不幸的是，您不能使用
边距顶部：auto
或类似的工具）

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

.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>




现在您可以使父容器显示：flex和align items:center。这应该行得通。尽管旧浏览器不支持flexbox属性。
您可以使用
flex
使
ul
居中垂直、水平或两者类似


.container{
背景：#f00；
高度：150像素；
显示器：flex；
对齐项目：居中；
/*对齐内容：居中；=>将使ul居中水平*/
}
.集装箱ul{
背景：#00f；
}


A
B
C

对于绝对定位，只有在事先知道元素高度（或使用JavaScript测量）的情况下才能进行绝对定位。我可以做到。你能告诉我更多的细节吗？试着加上：自动；你的保证金：0；您是否将其限制为仅使用css，而不使用javascript解决方案？出于故障排除的目的。在添加任何可能影响定位的其他内容之前，我会先尝试让裸体解决方案起作用。既然有人说CSS不能修改，那么你可以通过jQuery删除它。我的意思是，我需要CSS是因为其他原因，而不是因为实际上不可能删除它：D-1，尽可能避免使用javascript进行样式设计-特别是当可以通过CSS实现时，这是避免所谓的“flash of unstyled content”是的，也许吧，但这是我真正需要做的唯一事情。我知道你说的flash of unstyled content是什么意思，但最终我认为这取决于内容的位置。jQuery内置CSS功能有很多原因，就像你说的“尽可能不要使用javascript”“，但在这种情况下，这也许是所需要的。这个解决方案似乎正在发挥作用。我已经尽了最大努力来解释为什么
页边顶部不能
自动
——以及比绝对定位更优雅的垂直居中方式：）你不认为我已经在寻找答案了吗？你的方法不管用。@香蕉我知道这是个老问题，但你使用的是什么浏览器？经过大量研究，我确定这种方法适用于Opera、IE8+、Firefox、Chrome和safari。