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

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或http://i.imgur.com/Xvdt42j.png所示.

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

添加小提琴:http://jsfiddle.net/f3x7977z/

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

为了最终结果,我们欢迎任何关于额外包装的建议!

Answer 1

说明

position将包装器的CSS属性更改为相对,将要中心的元素更改为绝对.

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

在此之后,您将注意到元素并非完全居中,因为它自己的高度和宽度不在计算范围内.

所以我们修复了属性transform: translate(-50%, -50%),它将元素的一半高度向上,一半宽度向左.结果将是垂直和水平居中的元素.

由于我们考虑了IE8,我们将使用a 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

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

此处发布的其他答案已经解决了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)
                                http://stackoverflow.com/a/31728799/3597276 */ 
.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/