如何将绝对定位的元素居中显示

Question

我想要绝对定位一个文本在我的图片上方，但它似乎没有居中。我尝试了一些东西，但很奇怪。我想制作一个响应式网站，但是这样做开始看起来很奇怪。以下是我的代码。

HTML

<div id="container"></div>
<div class="parent">
    <div class="child">
        <h1> Richy Photography </h1>
    </div>
</div>

CSS

#container {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-image:url(image.jpg);
    background-size:cover;
    background-position:50% 50%;
    background-repeat: no-repeat;
}
body, html
{
    height:100%;
    width:100%;
}
.parent {
    position:relative;
    font-family: Helvetica, Arial, sans-serif;
    width: 100%;
    height: 100%;
    margin:0;
    padding:0;
}

.child {
    position: absolute;
    left:37%;
    top:37%;
    margin:0;
    padding:0;
}

- user3219918

Answer 1

由于顶部和左侧偏移量达到了37%，如果视口过小，文本将会出现在屏幕之外。

一个更简单的解决方案是将您的.parent元素设置为以表格形式显示，然后将您的.child元素设置为以表格单元格形式显示，并水平垂直对齐内容。

.parent {
    display: table;
    height: 100%;
    width: 100%;
}

.child {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

JSFiddle演示。

这在IE8及以上的所有现代浏览器上都支持。

为了让内容显示在背景图像上方，您需要给.parent元素一个更高的z-index属性，并给它相对定位：

.parent {
    display: table;
    height: 100%;
    position: relative;
    width: 100%;
    z-index: 2;
}

JSFiddle演示。

虽然你可以简单地将背景色应用于.parent元素并完全删除#container元素。

- James Donnelly

---

当我这样做时，文本没有出现。 - user3219918

@user3219918 当你尝试时，我一定正在编辑我的答案。请查看我的更新答案，它应该可以解决你的问题。 - James Donnelly

非常好用。谢谢。 - user3219918

Answer 2

你只需要将宽度更改为任何你想要的大小，现在你也可以删除左侧：

.child {
position: absolute;
text-align:center;
margin:0;
padding:0;
width:100%;
}

因为绝对定位的元素不会覆盖相对定位元素的整个宽度，因此您需要自行指定，并且现在可以使用text-align:center。

演示

- Suraj Rawat

---

由于37%的顶部和左侧偏移量，如果视口太小，文本将显示在屏幕外。 - James Donnelly

我做的时候它并不是真正居中的。从底部看，比顶部多了一点空间，但水平方向上还好。 - user3219918

它正常工作，兄弟们看一下 http://jsfiddle.net/KQtYN/1/ - Suraj Rawat

你可以根据需要添加"top:37%"，这取决于你。否则它能正常工作 :) - Suraj Rawat

Answer 3

将左右边距设置为自动，添加一个宽度，并使用left:0;和right: 0;应该可以解决问题。

像这样：

.child {
  position: absolute;
  top: 0;
  width:26%;
  margin: 0 auto;
  left:0;
  right:0;
}

- Simon Musgrave

Answer 4

你不能仅依赖left: 37%;来使你的元素在不同的屏幕尺寸下居中。 试试left: 0; text-align: center; width: 100%;，这应该可以让你的.child元素在任何父元素尺寸下都居中。

如果你真的需要position: absolute;，可以试试这个方法，否则就采用@James Donnelly的答案，那更好一些。

祝你在项目中玩得愉快，好运！

- Axente Paul