在不知道大小的情况下水平和垂直居中绝对定位元素 [英] Center horizontally and vertically an absolute positioned element without knowing the size

问题描述

我什至不知道这是否可以仅使用 CSS，但我不得不问.

请相应地在提供答案之前阅读规范.谢谢！

我的标记:

<img src="http://placehold.it/350x150"><p>一些文本随机大小</p>

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

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

如果我在段落上设置绝对位置，它不会垂直对齐，因为如果我不知道段落高度，我就无法设置负边距.我在考虑表格和表格单元格(垂直对齐:中间；)，但我只有 1 个单元格.有什么想法吗?

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

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

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

解决方案

说明

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

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

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

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

由于我们考虑到 IE8，我们将使用 filter 来实现与 transform: translate 相同的效果.

为了生成 filter 属性，使用了以下资源:IE 的 CSS3 转换转换器

示例

.box {边距:10px；显示:内联块；位置:相对；}.box 跨度 {位置:绝对；顶部:50%；左:50%；背景:#fff;box-shadow: 0 0 3px rgba(0, 0, 0, 1);填充:5px；}.box.translate >跨度 {变换:翻译(-50%，-50%)；-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";}

<img src="http://placehold.it/500x200"/><span>居中文本</span>

I don't even know if this is possible using CSS only, but I have to ask.

PLEASE, read the specs before you provide an answer, accordingly. Thank you!

My markup:

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

Obviously, .wrapper will have the height of my img element, if that's a block. Then, I need the p element to be centered horizontally and vertically inside the wrapper. I don't have a fixed width or height for the p element.

So, regardless paragraph size or even image size, it should be vertically and horizontally aligned, as is shown here http://i.imgur.com/phiR48H.png or here http://i.imgur.com/Xvdt42j.png.

If I set absolute position on the paragraph, it will not vertically align, because I cannot set negative margin if I don't know paragraph height. I was thinking about table and table-cell (vertical-align: middle;), but I only have 1 cell. Any thoughts?

Added fiddle: http://jsfiddle.net/f3x7977z/

It's important that the provided solution have backwards compatibility, in special in IE8+.

Any suggestions on extra wrappers, for the sake of the final result, are welcome!

解决方案

Explanation

Change the CSS property position of the wrapper to relative and of element you want centered to absolute.

Then position the element in the middle of the wrapper using top: 50% and left: 50%.

After this you will notice that the element is not exactly centered, because it's own height and width are off the calculation.

So we fix with the property transform: translate(-50%, -50%), which brings the element half of it's height up, and half it's width left. The result will be a vertically and horizontally centered element.

Since we are taking IE8 into consideration, we will use a filter to achieve the same effect as the transform: translate.

In order to generate the filter attribute, the following resource was used: IE's CSS3 Transforms Translator

Example

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

这篇关于在不知道大小的情况下水平和垂直居中绝对定位元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！