Html/Css 在一个 div 中垂直居中一个 div答案

【问题标题】：Html/Css center a div in a div verticallyHtml/Css 在一个 div 中垂直居中一个 div
【发布时间】：2013-02-22 22:00:48
【问题描述】：

大家好，这是我的问题：

我有一个 html/css 网站，我有几个父子 div。我需要制作一个脚本（Jquery？）来查找父级和子级 div 的高度，并添加必要的 css 以使子级在父级中居中...

<div class="parent">
 <div class="child">
 </div>
</div>
.....
<div class="parent">
 <div class="child">
 </div>
</div>
....
<div class="parent">
 <div class="child">
 </div>
</div>

<SCRIPT>
???
</SCRIPT>

谢谢大家...

【问题讨论】：

Ciao Filippo！您能发布到目前为止您尝试过的任何 jQuery 吗？因此，我们不仅可以向您展示如何操作，还可以了解您已经知道的内容并希望 - 为您提供更多信息。此外，了解您的孩子是否始终具有固定高度（或者可能因元素而异）将非常有帮助
考虑只为父子元素的 div 添加另一个类，然后使用垂直对齐 css 属性。

标签： jquery html css alignment

【解决方案1】：

使用 jQuery：

LIVE DEMO

$('.parent').each(function(){

  var $pa = $(this);
  var $ch = $pa.find('.child');
  var paH = $pa.innerHeight();
  var chH = $ch.innerHeight();

  $ch.css({marginTop: (paH-chH)/2});

});

如果您的.child 中有图像，我建议您为该图像分配height="" 属性，或者将JS 放在函数中并在$(window).load(function(){ /*here*/ }); 上调用它

【讨论】：

非常干净的解决方案！赞！但是，只有在无法使用直接的 CSS 解决问题时，我们才应该使用脚本。
@RomiHalasz 我同意你的看法，这就是我开始回答的原因：with jQuery: :)
我也同意，但我不知道仅使用 css 的灵活方法
我喜欢您的解决方案，如果您有嵌套结构，您可以将 '.child' 更改为 '>.child'。
抱歉没有详细说明。我以为我会提高可读性。除此之外，没有进行其他更改。

【解决方案2】：

你可以试试这个 jQuery 代码：

$(document).ready(function () {
  var childHeight  = $('.child').css('margin-top', function() {
    var childHeight = $(this).height();
    var parentHeight = $(this).parent().height();
    return ((parentHeight - childHeight) / 2);
  });
});

基本上，在加载文档后，
您将检索所有具有 child 类和相关父类的 DOM 元素的高度，
您需要它来计算子 obj 的 margin-top 值。

【讨论】：

【解决方案3】：

如果我理解你，我想你可以用这个 css 做到这一点：

.parent {
  height: auto;
  overflow: hidden; /* This actually makes height auto */
  padding: 10px 0; /* exmaple of 10px up and down that will actully center it with some space IF space is needed*/
}

【讨论】：

他想要 JavaSript，而不是 CSS。
因为有时候，他需要 javascript 来处理其他事情。所以你应该建议用 css 的 javascript/jquery 是最好的。

【解决方案4】：

另一种方法是将父 div 的 display 属性设置为 table-cell。代码如下：

<div style="display:table-cell; height:200px; border:1px solid red; vertical-align:middle; align: center;">
    <div style="height:100px; border:1px solid blue;">The content</div>
</div>

这就是它的样子：

http://screencast.com/t/6kB9ec1uV

您不需要脚本，除非您除了将子 div 居中之外还想做其他事情。祝你有美好的一天！

【讨论】：

【解决方案5】：

这里不需要使用jQuery，你可以使用overflow:auto和margin组合，如下链接所示。

Working Fiddle

.parent{overflow:auto;width:100px;height:100px;background-color:green;margin-bottom:10px;}
.child{width:50px;height:50px;background-color:blue;margin:25px;}

您也可以在这里用百分比替换像素。

这也可以使用float 或display 属性而不是overflow:auto 来完成。

【讨论】：

我不知道宽度和高度，因为它们应该以响应方式改变
这个 css 解决方案适用于所有具有不同内容高度的 div？如果您的内容是由服务器端代码编写的，那么您之前无法知道孩子的身高..