Javascript 如何在一条直线上垂直对齐两个元素的中心？

这是一个棘手的情况，所以我无法在标题中正确解释。但是我试过了

请看这把小提琴：

HTML:

有两个元素，我希望它们看起来像这样：

---

使一个图元的中心与另一个图元的中心对齐。我不能对

.child

元素使用

left:-50px

，因为这两个元素的

宽度不同。如何使用CSS实现结果？我也可以使用JavaScript和jQuery，但如果可能的话，我希望有一个CSS解决方案。
如果可以的话，不要将它们放在彼此之间，例如

HTML:

HTML

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

您的代码有几个问题。最主要的一点是你父母的宽度比孩子的宽度小。坦白说，我不知道这是为什么。第二个问题是你的孩子有
位置：绝对-这将有效地将其设置在特定像素点-如果未明确指定，则设置为0。我对您的代码做了一些更改：


使父对象的宽度大于子对象的宽度
从子项中删除了
位置：绝对
，并将其
顶部
更改为
页边顶部
将孩子的
边距
设置为
自动

这是一个
在不改变标记的情况下，我想不出任何纯CSS解决方案；但是，使用jQuery很容易实现：（）

由于两种大小可能不同，因此即使CSS3
calc（）
函数在这里也没有帮助

正如@Tyron所注意到的，
.child
如果关闭1px，是因为它的左边框。您可以通过添加以下内容来解决此问题：

.child{margin-left:-1px;} /* 1px being border-left's width */

较大的元素必须嵌套在较小的元素中是否有特定的原因


我交换了属性并改变了位置（切换父对象和子对象）

子元素不是子元素-它可以放在父元素之后吗？再次检查你的小提琴…@Danield否，子元素不能放在父元素之后。在你的JSFIDLE中，元素在Chrome/Firefox中仍有一个像素的间隔谢谢。我想到了这个解决办法。然而，如果可能的话，我想在CSS中找到一个解决方案。我在等待更多关于CSS的答案。否则，这将是最终的解决方案。@Debiprasad不用担心，很乐意提供帮助：）不，子元素不能放在父元素之后。元素的宽度是可变的。所以，我不能确定父元素的宽度是否会大于子元素的宽度。在大多数情况下，子元素的宽度大于父元素的宽度。因此，这种解决方案在我的情况下不起作用。@Debiprasad如果子对象的宽度大于父对象的宽度，则DOM不正确。我强烈建议您检查DOM的结构，将这两个元素作为兄弟元素，而不是彼此的父元素。DOM没有问题。元素的宽度取决于元素的长度。DOM是这样的：@Debiprasad这里有文本列表。你为什么不用具体的数据来展示你想要实现的目标，而不是抽象的模块？我想用更少的代码来解释这种情况会很容易。当我看到你的代码时，首先我认为你给出了与Aleks G相同的解决方案。然后几秒钟后，我认为你得到了解决方案。然后我意识到你用CSS替换了child和parent，parent和child。谢谢，但不幸的是，child元素位于parent元素的内部。
<div class="parent"></div>
<div class="child"></div>    

.parent {
    border: 1px solid red;
    width: 150px;
    height: 30px;
    margin: 0px auto;
    position: relative;
}

.child {
    border: 1px solid green;
    width: 250px;
    height: 300px;
    position: relative;
    margin: 0px auto;
    margin-top:1px;
}

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

.parent , .child {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QUJFQUREODEyODE0MTFFM0FCNEZBREFCODAxMTcwMjkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QUJFQUREODIyODE0MTFFM0FCNEZBREFCODAxMTcwMjkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBQkVBREQ3RjI4MTQxMUUzQUI0RkFEQUI4MDExNzAyOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBQkVBREQ4MDI4MTQxMUUzQUI0RkFEQUI4MDExNzAyOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ppi8nlwAAAAOSURBVHjaYmBgYAAIMAAABAABmwPqCQAAAABJRU5ErkJggg==') repeat-y center center;
}

.parent {
    border: 1px solid red;
    width: 150px;
    height: 30px;
    margin: 0px auto;
    position: relative;
}

.child {
    border: 1px solid green;
    width: 250px;
    height: 300px;
    margin: 0px auto;
}

var $child = $('.child');
var $parent = $('.parent');

$child.css('left','-'+(Math.abs($child.width()-$parent.width())/2)+'px');

.child{margin-left:-1px;} /* 1px being border-left's width */

.parent {
  border: 1px solid green;
  width: 250px;
  height: 300px;
  position: relative;
  margin:0px auto;
  top:32px;
}
.child {
  border: 1px solid red;
  width: 150px;
  height: 30px;
  margin: 0px auto;
  position: relative;
  top:-32px;
}