文本对齐中心，而堆叠

Question

我有一些文本，我得到正确对齐中心。它目前在视频背景上。我希望它能做的事情就是在缩放的同时将文本中心对齐，甚至可以将它叠加在一起。

例如：

The cat ate the hat while 
    sitting on the matt 

这里是一个小提琴：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%); 
}