如何垂直对齐一行中的两个元素的中心？

Question

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

请看这个小提琴：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;
}

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

这样一个元素的中心将与另一个元素的中心对齐。我无法将left: -50px用于.child元素，因为两个元素的width各不相同。如何使用CSS实现结果？我也可以使用JavaScript和jQuery，但如果可能的话，我想在CSS中有一个解决方案。

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

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

Fiddle Demo

Answer 3

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

• 使父母的宽度大于孩子的宽度<​​/ li>
• 从孩子身上移除position: absolute并将其top更改为margin-top
• 将孩子的margin设置为auto

这是jsfiddle of the result

Answer 4

在不改变标记的情况下，我无法想到任何纯CSS解决方案;但是，使用jQuery，它很容易实现：（working jsFiddle）

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

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

由于两种尺寸可能会有所不同，因此即使CSS3 calc()功能也无济于事。

正如@Tyron注意到的那样，.child如果由于其左边界而被1px关闭。你可以通过添加：

来解决这个问题

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

Answer 5

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

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

我交换了属性并更改了位置（swopped父母和孩子）

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