在不知道大小的情况下水平和垂直居中绝对定位元素

Question

我什至不知道仅使用 CSS 是否可行，但我不得不问一下。

请相应地阅读规范，然后再提供答案。谢谢！

我的标记：

<div class="wrapper">
    <img src="http://placehold.it/350x150">
    <p>Some text random size</p>
</div>

显然，.wrapper 将具有我的 img 元素的高度，如果它是一个块的话。然后，我需要 p 元素在包装器内水平和垂直居中。我没有 p 元素的固定宽度或高度。

因此，无论段落大小甚至图像大小，都应该垂直和水平对齐，如此处所示http://i.imgur.com/phiR48H.png or here http://i.imgur.com/Xvdt42j.png。

如果我在段落上设置绝对位置，它不会垂直对齐，因为如果我不知道段落高度我就不能设置负边距。我在考虑 table 和 table-cell (vertical-align: middle;)，但我只有 1 个单元格。有什么想法吗？

已添加 fiddle：http://jsfiddle.net/f3x7977z/

重要的是所提供的解决方案具有向后兼容性，特别是在 IE8+.

为了最终的结果，欢迎任何关于额外包装的建议！

Answer 1

说明

将包装器的 CSS 属性 position 更改为 relative 并将要居中的元素更改为 absolute 。

然后使用 top: 50% 和 left: 50% 将元素定位在包装器的中间。

之后你会注意到元素没有完全居中，因为它自己的高度和宽度不在计算范围内。

因此我们使用属性 transform: translate(-50%, -50%) 进行修复，它使元素的一半高度向上，一半宽度向左。结果将是垂直和水平居中的元素。

考虑到IE8，我们将使用filter达到与transform: translate相同的效果。

为了生成 filter 属性，使用了以下资源：IE's CSS3 Transforms Translator

例子

.box {
  margin: 10px;
  display: inline-block;
  position: relative;
}
.box span {
  position: absolute;
  top: 50%;
  left: 50%;
  background: #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 1);
  padding: 5px;
}
.box.translate > span {
  transform: translate(-50%, -50%);
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";
}

<div class="box translate">
  <img src="http://placehold.it/500x200" />
  <span>centered text</span>
</div>

Answer 2

有一个更轻量级的解决方案。

从顶部向下取外层元素的 50%
将这 50% 中的 50% 留给内部元素，以达到外部元素底线的中心（参见下面的 fiddle）

.wrapper {
 position: absolute;
 top: 50%; left: 50%;
}
img { /* or a container with img and p */
 margin-top: -25%; margin-left: -50%;
}

<div class="wrapper">
    <img src="http://placehold.it/350x150">
    <p>Some text random size</p>
</div>

Answer 3

您应该使用这个解决方案而不是解决方案

.wrapper {
    position: absolute;
    top: 50%; left: 50%;
}
img { 
    margin-top: -25%; margin-left: -25%;
}

Answer 4

勾选this solution

HTML

<div class="wrapper">
    <img src="http://placehold.it/350x150"/>
    <span></span>
    <p>My text, size unknowkn</p>
</div>

CSS

.wrapper
{
    position: relative;
}

p
{
     position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

Answer 5

如何使多个绝对定位的子元素垂直和水平居中

此处发布的其他答案已经解决了 IE8 要求。这个答案为不关心 IE8 的人提供了一个干净高效的解决方案。

HTML（无变化）

<div class="wrapper">
    <img src="http://placehold.it/350x150"/>
    <p>My text, size unknowkn</p>
</div>

CSS

html, body { height: 100%; } /* necessary when using percentage heights within body
                                on non-absolutely positioned children (such as .wrapper)
                                 */ 
.wrapper { 
    height: 100%;
    width: 100%;
    position: relative; /* establish nearest positioned ancestor for abs. positioning */
}

img {
  position: absolute;
  left: 50%; /* positions img relative to container */
  top: 50%;  /* positions img relative to container */
  transform: translate(-50%, -50%); /* positions img relative to its height and width */
}

p {
  position: absolute;
  left: 50%;  /* positions p relative to container */
  top: 50%; /* positions p relative to container */
  transform: translate(-50%, -50%);  /* positions p relative to its height and width */
  margin: 0;
}

演示：http://jsfiddle.net/f3x7977z/7/

在不知道大小的情况下水平和垂直居中绝对定位元素

Center horizontally and vertically an absolute positioned element without knowing the size

html

css

vertical-alignment

说明

例子

如何使多个绝对定位的子元素垂直和水平居中