问CSS如何将一个元素定位在另一个元素的中间(半高/垂直50%)

EN

这已经很晚了，但是我试着在codepen上做了一个例子，如果我正确理解了你的问题，它会显示一个工作的例子。

http://codepen.io/trgraglia/pen/RWbKyj

使用CSS转换。

例如，transform:translateX(-50%);会将一个元素向左移动50%。现在，您可以使用position和bottom或top或left或right将其与父对象对齐，然后按其自身的尺寸移动它。

希望这能有所帮助！

使用CSS和jQuery-

CSS

.div{
    top:50%
}

jQuery

var divheight = $(.div).height() / 2;
$(.div).attr('style','margin-top:-'+divheight+'px;');

如果你不知道这两个高度，只有两种方法：

Flexbox

• 设置父display: table和子display: table-cell和vertical-align: middle.

• Using CSS3 Flexbox：http://www.w3.org/TR/css3-flexbox/，但浏览器支持有限：http://caniuse.com/#search=flexbox

如果你对这个话题感兴趣，这里有一篇有更多技巧的好文章：http://www.vanseodesign.com/css/vertical-centering/

如您所见，在不知道元素高度也不使用CSS3的情况下垂直对齐元素的唯一方法是使用display: table-cell。