在 div/img 上垂直和水平居中文本

Question

我正在尝试让 "concierge" 始终位于此 page 上的图像的中央。我想我很接近，但这不仅仅是正确的。有任何想法吗？

header.concierge_header {
  position: absolute !important;
  top: 30% !important;
  color: white !important;
  left: 50%;
}

然后concierge_header_div是父

其他选择是切换到类似的东西，但我还没有让它工作

display: table-cell;
  width: 100%;
  height: 100%;
  text-align: center;
  vertical-align: middle;

Answer 1

改为

header.concierge_header {
      position: absolute !important;
      top: 30% !important;
      color: white !important;
      left: 50%;
    }

至

header.concierge_header {
  position: absolute !important;
  top: 50% !important;
 left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
  color: white !important;

}

Answer 2

你可以这样使用：

header.concierge_header {
  position: absolute !important;
  top: 50% !important;
  margin-top: -67px;
  color: white !important;
  left: 50%;
}

或者，另一种方法是：

header.concierge_header {
  position: absolute !important;
  text-align: center;
  color: white !important;
  width: 100%;
}
header.concierge_header h1 {
  line-height:527px; /* this is the size of the image */
}

Answer 3

要设置某个 dom 的垂直和水平中心，您必须将包装器的位置设置为相对位置，将目标位置 dom 设置为绝对位置，并设置顶部、右侧、左侧、底部位置为 0，保证金为 auto

.concierge_header h1
{
  position: absolute !important;
  color: white !important;
  top:0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  display: block;
  height: 50px;
  text-align: center;
}
.concierge_header_div {
  position: Relative;
  width: auto;
  height: auto;
}

在 div/img 上垂直和水平居中文本

center text vertically and horizontally over div/img

css

vertical-alignment