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;
}

Answer 1

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

更简单的解决方案是将.parent元素设置为table，然后将.child元素设置为table-cell，水平和垂直显示对齐的内容：

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

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

JSFiddle demo

从IE8开始，all modern browsers支持此功能。

为了让内容显示在背景图片的顶部，您需要为.parent元素提供更高的z-index属性并为其提供相对定位：

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

JSFiddle demo

虽然您可以简单地为.parent元素添加背景并完全删除#container元素。

Answer 2

您只需要根据需要更改宽度，现在您也可以删除左侧：

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

因为绝对定位元素不覆盖相对元素的整个宽度所以你需要自己指定，你可以使用text-align：center

live demo

Answer 3

你不能依赖左：37％;为了使您的元素在不同的屏幕尺寸中居中。试试left: 0; text-align: center; width: 100%;，无论父级有多大，都应使.child元素居中。

如果你真的需要职位：绝对;尝试一下，否则请与@James Donnelly一起回答，这是击球手。

祝你的项目充满乐趣。

Answer 4

将左右边距设置为自动，添加宽度，并使用左：0;和右：0;应该工作。

这样的事情：

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

如何居中绝对定位的物品

4 个答案: