中心垂直文字在滑块上

Question

我正在为博客使用模板，但我想垂直对滑块上的文本对齐。我已经尝试更改填充物，但后来在移动设备上没有集中。同样，当我将最高值从0更改为一个百分位数时，它不起作用。

.sora-slide .ty-thumb-bonos {
  position: relative;
  float: left;
  margin: 0!important;
  width: 100%;
  height: 560px;
  overflow: hidden;
  display: block;
  vertical-align: middle;
}
.sora-slide .sora-slide-con {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 0;
  top: 0;
  width: 100%;
  padding: 20px 10px;
  z-index: 2;
  box-sizing: border-box;
  text-align: center;
  max-width: 460px;
  display: table;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

Answer 1

您可以将其添加到.sora-slide .sora-slide-con

transform: translateY(-50%);
top: 50%;

并更换

margin: 15% auto;

margin: 0 auto;

如果我理解你，这应该做到。

完整的CSS：

.sora-slide .sora-slide-con {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto; /* <- 0 auto */
  bottom: 0;
  top: 50%;       /* <- 50% instead of 0 */
  width: 100%;
  padding: 20px 10px;
  z-index: 2;
  box-sizing: border-box;
  text-align: center;
  max-width: 460px;
  display: table;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  transform: translateY(-50%); /* <- transformY -50% */
}

要了解为什么我添加transform和top，请参见So：https：//stackoverflow.com/a/40530404/6773269安德鲁·骨。

他很好地解释了。

或像aldo.roman.nurena说：

tl; dr top从页面/容器高度上适用50％，转换：转换为-50％的元素高度。