Question

我正试图让“礼宾”始终以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，将边距设置为自动

.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上垂直和水平居中文本

3 个答案: