Html 在图像上垂直和水平居中放置文本

我想有一个大的图像，有100%的宽度和大约70%的屏幕高度。在这个图像上，我希望在这个图像的顶部有一些文本，这个文本需要在图像的中间。strong>简而言之：如何在100%宽度的图像中水平和垂直居中显示此文本？：

<div id="top-area">
<img src="img/startphoto.jpg" alt="background image #1" />
<p>Some text</p>
</div>



#top-area img{
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

#top-area p{
    position: relative;
    text-align: center;
    margin-top: 330px;

    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 3em;
}

一些文本

#顶部区域img{
宽度：100%；
位置：绝对位置；
顶部：0px；
左：0px；
}
#顶部区域p{
位置：相对位置；
文本对齐：居中；
利润上限：330px；
颜色：白色；
字体系列：“蒙特塞拉特”，无衬线；
字号：3em；
}

---

我知道我使用页边距顶部来获得文本的水平位置，但这感觉是错误的。有人有更好的建议吗？

您可以为

img

和

p

元素指定

position:absolute

。然后您将声明

top:40%p

元素上编码>以使其垂直居中。我之所以使用

40%

，是因为您使用的文本的大小。您可以使用

50%

，然后使用javascript计算文本的高度，并为其指定一个顶部负边距。仅当文本高度将动态变化时才需要此选项

演示

---

这是经过重构后的代码。它使顶部区域成为决定图像大小的区域，因为图像只是填充空间。然后将文本向左移动到顶部区域大小的50%，然后将其翻译回p大小的50%，从而使文本居中。对于任何大小的图像和任何大小的文本，这都是一种可靠的方式

<div id="top-area">
    <img src="http://ts2.mm.bing.net/th?id=H.4836061304389953&pid=1.7" alt="background image #1" />
    <p>Some text</p>
</div>

#top-area {
  position: relative;
  width: 100%;
  height: 70%;
}
#top-area img{
    width: 100%;
    height: 100%;
}

#top-area p{
    position: absolute;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 3em;
    top: 50%;
    left: 50%;
    transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
}

一些文本

#顶部区域{
位置：相对位置；
宽度：100%；
身高：70%；
}
#顶部区域img{
宽度：100%；
身高：100%；
}
#顶部区域p{
位置：绝对位置；
颜色：白色；
字体系列：“蒙特塞拉特”，无衬线；
字号：3em；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
-webkit转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
}

---

Codepen查看它的工作情况：

我相信Travis的答案需要浏览器支持背景大小，而IE8仍然缺乏这种支持。但是，类似这样的方法应该可以工作，将图像和跨距放置在div中：

div.largeImageContainer,
img.largeImage{
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
}

div.largeImageContainer{
   top: 30%;
   text-align: center;
}

span.largeImageText{
   position: relative;
   top: 50%;
   line-height: 16px;
   margin-top: -8px;
}

---

目前提出的所有解决方案都不是“理想的”。
首先，如果图像不属于内容本身，请不要使用图像元素。而是将其作为背景图像应用

使用新的CSS3背景选项，您可以额外设置背景大小、-剪辑、-原点等

要使文本在元素中水平和垂直居中，只需将其显示值设置为“表格单元格”和“文本对齐：居中”和“垂直对齐：居中”，即可

<div id="top-area">
  <p>Some text</p>
</div>


html, body {height: 100%;}

#top-area {
    display: table;
    width: 100%;
    height: 70%;
    border: 1px solid red;
    /*background-image: ... */
}

#top-area p {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

一些文本

html，正文{高度：100%；}
#顶部区域{
显示：表格；
宽度：100%；
身高：70%；
边框：1px纯红；
/*背景图像：*/
}
#顶部区域p{
显示：表格单元格；
文本对齐：居中；
垂直对齐：中间对齐；
}

看

浏览器支持：IE 8+和所有“现代”浏览器

---

PS：“现代方式”将使用

您想要图像顶部的文本吗？使用背景图片可能更好为什么人们觉得需要复制另一个人的答案！？如果从图像中删除

height:100%

，则图像不会失真。否则，它看起来不错。

<div id="top-area">
  <p>Some text</p>
</div>


html, body {height: 100%;}

#top-area {
    display: table;
    width: 100%;
    height: 70%;
    border: 1px solid red;
    /*background-image: ... */
}

#top-area p {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}