html - 堆叠时文本居中对齐

Question

我有一些文本已正确居中对齐。它目前在视频背景上。我想要它做的是在缩放时始终对齐文本中心，即使它堆叠在彼此之上。

例如:

The cat ate the hat while
   sitting on the matt

这是一个 fiddle :http://jsfiddle.net/14kd3L55/3/ 需要正确居中的是引用

HTML:

<div class="landing_wrap">
    <div class="quote">
        <p>cat ate a hat while sitting on the mat there was even a bat</p>
    </div>
    <div class="landing">

/*-------------------------------------------------------- Default Layout ----------------------------------------------------------------------------------------------------------------*/
.wrapper{
    display: table;
    width: 100%;
    min-height: 100%;
    position: relative;
}
/*-------------------------------------------------------- Landing Layout ----------------------------------------------------------------------------------------------------------------*/
.quote{
    position:absolute;
    left:25%;
    top:50%;
    margin:0 auto;
    font-family: 'Roboto', sans-serif;
    color:#aaa;
    font-weight:600;
    font-size:2em;
    text-align:centre;
    z-index:4000;
}
.landing_wrap{
    position:relative;
    margin:auto;
    overflow:hidden;
    width:100%;
    height:100%;
}
.landing{
    height:1000px;
    min-height:660px; !important
}
#landingbg {
    position:absolute;
    width:auto;
    height:auto;
    background-size:cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    overflow:hidden;
    z-index:1;
}

Answer 1

您可以使用一些小技巧来实现:

.quote {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
         -transform: translate(-50%, -50%);
}