Текст выравнивает центр при укладке

Question

У меня есть текст, который ive получил для правильного выравнивания центра. В настоящее время он находится на фоне видео. То, что им нужно сделать, - это выравнивание текстового центра все время при масштабировании, даже то, что оно стекает друг над другом.

, например:

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