Jquery Html/Css将div垂直居中

大家好我的问题是：

我有一个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>

.....
....
???

---

谢谢大家…

如果我理解你，我想你可以用这个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*/
}

---

这里不需要使用jQuery，您可以使用

overflow:auto

与

margin

组合，如下链接所示

.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

来完成此操作。另一种方法是将父div的

display

属性设置为

表单元格

。代码如下：

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

内容

这就是它看起来的样子：

你不需要一个脚本，除非你想做一些其他的事情，除了中心的儿童div。祝你有一个伟大的一天

使用jQuery：

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

---

如果您的

.child中有图像，我建议您将该图像分配为
height=”“
属性，或者将JS放在函数中，并在
$（窗口）上调用它
您可以尝试以下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元素的高度，

您需要这个来计算子对象的边距顶部值。
Ciao Filippo！你能发布你到目前为止尝试过的jQuery吗？因此，我们不仅可以向您展示如何做到这一点，还可以了解您已经知道的内容，并希望能用更多信息指导您。此外，了解您的孩子是否总是有一个固定的高度（或者每个元素的高度可能不同）会非常有帮助。考虑只为父级和子级的div添加另一个类，然后使用垂直对齐css属性。非常干净的解决方案！荣誉但是，只有在使用直接CSS无法解决问题的情况下，我们才应该使用脚本。@RomiHalasz我同意你的观点，这就是为什么我在开始回答时使用了：使用jQuery:：）我也同意，但我不知道只有使用类似于你的解决方案的cssI才能灵活地做到这一点，如果您有嵌套结构，可以将“.child”更改为“>.child”。很抱歉，缺少详细信息。我想我应该提高可读性。除此之外，没有做任何其他更改。他想要JavaSript，而不是CSS。因为有时候，他需要javascript来处理其他事情。所以你应该建议使用css的javascript/jquery是最好的。我不知道宽度和高度，因为它们应该以响应的方式改变。这个css解决方案适用于所有具有不同内容高度的div？如果您的内容是由服务器端代码编写的，您以前无法知道子级的高度。。