图像垂直和水平居中，正下方有一行文本

Question

我正在为客户构建一个登录页面，该页面中央有一个徽标，其标语正下方。

他们希望标语在页面加载时淡入，因此我必须将其显示为段落，而不是将其包含在图像文件中。

如何让文本段落响应式地直接位于居中图像下方？

这是我的 html 代码：

<div class="viewport1">
<div class="center-wrapper">
<div class="image-wrapper">
<a href="home.html"><img src="images/landing_logo2.png" /></a>
<div id="test"><p>enter the sunshine state</p></div>
</div>
</div>
</div>

还有我的CSS：

<style>

div.viewport1 {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
width: 100%;
overflow: hidden;
z-index: -9999;
}

div.center-wrapper {
max-width: 100%;
height: 100%;
float: left;
position:relative;
left: 50%;
}

div.image-wrapper {
left: -50%;
position: relative;
max-width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}

img {
top: 50%;
left: 50%;
position: relative;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
max-height: 100%;
max-width: 100%;
vertical-align: middle;
display: inline-block;
}

*, *:before, *:after {
box-sizing: border-box; 
}

.image-wrapper p {
width: 100%;
padding-top: 200px;
margin-left: 10px;
font-family: segoe;
font-size: 21px;
text-align: center;
color: #fff;
-webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
   -moz-animation: fadein 5s; /* Firefox < 16 */
    -ms-animation: fadein 5s; /* Internet Explorer */
     -o-animation: fadein 5s; /* Opera < 12.1 */
        animation: fadein 5s;
  }

@keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

</style>

Answer 1

我知道徽标应该完全居中，而文本应该在其下方。

你似乎有很多不必要的包装器，所以我简化了这个。

使用常用技术将 image-wrapper 绝对定位在中心 *but 然后将 #test div 绝对定位在中心parentdiv.

底部

div.image-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid grey;
}
.image-wrapper img {
  display: block;
}
#test {
  position: absolute;
  top: 100%;
  width: 100%;
  border: 1px solid grey;
  border-top: none;
}
#test p {
  width: 100%;
  font-family: segoe;
  font-size: 21px;
  text-align: center;
  color: #000;
}

<div class="image-wrapper">
  <a href="home.html">
    <img src="http://lorempixel.com/output/people-q-c-250-250-3.jpg" />
  </a>

  <div id="test">
    <p>enter the sunshine state</p>
  </div>
</div>

JSFiddle Demo

Answer 2

这是一个简单的例子，说明我将如何处理这个问题。

这样，它向后兼容更多，问题也更少，例如

时发生的问题

html, body {
  margin: 0;
  height: 100%;
}
.out {
  font-size: 0;
  text-align: center;
  height: 100%;
}
.out:before {
  content: " ";
  height: 100%;
}
.out:before, .in {
  display: inline-block;
  vertical-align: middle;
}
.in {
  font-size: 12pt;
}

<div class="out">
  <div class="in">
    <img src="//placehold.it/200x100">
    <div>This is a caption</div>
  </div>
</div>

图像垂直和水平居中，正下方有一行文本

Vertically and horizontally center image with line of text directly below

html

css

centering