jquery - 绝对居中元素而不知道它的高度

Question

我需要居中一个元素（垂直和水平），虽然我知道它的宽度，但它的高度可能会改变。

我整个早上都在谷歌上搜索，我发现的所有东西似乎都在说我需要知道高度。

有没有我可以使用的 jQuery 方法，我真的不想开始使用该table-cell属性

Answer 1

您可以使用jQuery.outerHeight动态获取元素的高度属性。

Answer 2

使用 CSS 可以使用灵活的盒子，但它还不能在 IE 上工作：

.container{
  display: flex;
  min-height: 100%;  /* <- or whatever height the container has */
}

.centered{
  margin: auto;     
}

（小提琴）

Answer 3

您可以使用：

$("#whatever").height();

这会告诉你物体的高度。如果它发生变化，那么您可以再次调用它并重新居中。

Answer 4

你不需要任何 js 这很简单

*请注意，这将适用于高度和宽度固定但我们不知道的 img 类对象，对于文本，您需要使用 js 跨浏览器正确运行它

看看这个小提琴http://jsfiddle.net/Ukvfw/ 和较小的图像相同的代码http://jsfiddle.net/Ukvfw/1/

这是代码

html - （您可以更改图像链接并尝试使用任何高度和宽度）

<div class="parent">
    <img class="child" src="http://wiki.guildwars.com/images/thumb/6/60/User_Jette_awesome.svg/2048px-User_Jette_awesome.svg.png" />
</div>

CSS -

.parent{
 width:300px;
 height:300px;
 position:relative;
 border:1px solid red;
 padding:10px;
}

.child{
 position: absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 margin:auto;
 max-height:300px;
 max-width:300px;
}

Answer 5

<table style="width: 100%; height:100%;">
<tr>
 <td style="text-align: center; vertical-align: middle;">
      /*code here*/
 </td>
</tr>
</table>

我认为这是最“通用和全地形”的方式。