如何在同一行垂直居中两个元素？

Question

这是一个棘手的情况，我无法在标题中恰当地解释它。但我已经尝试了。

请看这个fiddle：http://jsfiddle.net/yCjnz/ HTML：

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

CSS：

div {
    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;
    position: absolute;
    left: auto;
    top: 32px;
}

有两个元素，我希望它们出现如下所示： 这样，一个元素的中心将与另一个元素的中心对齐。我无法对 .child 元素使用 left: -50px，因为两个元素的宽度不同。如何使用 CSS 实现这种结果？如果可能的话，我也可以使用 JavaScript 和 jQuery 来解决问题，但我更想在 CSS 中找到解决方案。

- Debiprasad

---

子元素不一定要作为父元素的子级，可以将其放置在父元素之后吗？ - Danield

请再次检查您的代码... http://jsfiddle.net/yCjnz/7/ - Ankur Dhanuka

@Danield 不可以将子元素放在父元素之后。 - Debiprasad

Answer 1

如果可以的话，不要将它们放在彼此内部，例如：http://jsfiddle.net/FzBtv HTML:

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

CSS: 层叠样式表

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

- Tyron

---

不可以将子元素放在父元素之后。 - Debiprasad

Answer 2

HTML

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

CSS

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

演示代码

- Anup Singh

---

谢谢，但不幸的是子元素在父元素内部。 - Debiprasad

Answer 3

如果不改变您的标记，我想不到任何纯CSS的解决方案；但是，使用jQuery，很容易实现：（工作的jsFiddle）

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

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

由于两个尺寸可能会变化，即使使用CSS3的calc()函数也无法解决这个问题。

正如@Tyron所指出的那样，.child因其左边框而偏移了1像素。您可以通过添加以下内容来修复它：

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

- Yotam Omer

---

在你的jsfiddle中，在Chrome/Firefox中元素仍然偏移一个像素。 - Tyron

谢谢。这个解决方案在我脑海中。但是如果可能的话，我想在CSS中找到一个解决方案。我正在等待更多的CSS答案。否则，这将是最终的解决方案。 - Debiprasad

@Debiprasad 不用担心，很高兴能帮到你 :) - Yotam Omer

Answer 4

“为什么更大的元素必须嵌套在较小的元素中？”

http://jsfiddle.net/yCjnz/10/

我交换了属性并改变了位置（交换了父元素和子元素）。

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

- sCaRy1337

---

当我看到你的代码时，起初我以为你给出了与Aleks G相同的解决方案。然后我又想了几秒钟，认为你已经找到了解决方案。但后来我意识到，你在CSS中将子元素替换为父元素，将父元素替换为子元素。 - Debiprasad

Answer 5

您的代码存在一些问题。主要问题是父元素的宽度小于子元素的宽度。我不确定为什么会这样，坦白地说。第二个问题是您的子元素具有position: absolute; - 这将有效地将其设置在特定的像素点上 - 或者如果没有明确指定，则为0。我对您的代码进行了一些更改：

• 使父元素的宽度大于子元素的宽度
• 从子元素中删除position: absolute并将其top更改为margin-top
• 将子元素的margin设置为auto

这是结果的jsfiddle链接

- Aleks G

---

元素的宽度是可变的。因此，我无法确定父元素的宽度是否大于子元素的宽度。在大多数情况下，子元素的宽度比父元素的宽度更大。因此，这个解决方案在我的情况下不起作用。 - Debiprasad

@Debiprasad 如果子元素的宽度大于父元素的宽度，则您的DOM结构不正确。我强烈建议您检查您的DOM结构，并将这两个元素作为兄弟元素而不是彼此的父元素。 - Aleks G

DOM没有问题。元素的宽度取决于元素的长度。DOM类似于这样：http://jsfiddle.net/TENdH/ - Debiprasad

@Debiprasad，你已经有了文本列表。你为什么不用具体的数据展示你想要实现的东西，而不是抽象的块呢？ - Aleks G

我以为用更少的代码来解释情况会更容易。 - Debiprasad