堆叠时文本对齐中心

Question

我有一些文字已经正确对齐中心。它目前在视频背景下。我想要它做的是在缩放时始终对齐文本中心，甚至是它相互叠加的内容。

例如：

The cat ate the hat while
   sitting on the matt

这是一个小提琴：the documentation 需要正确居中的是引用

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%);
}