Поддерживает соотношение сторон и текст центра внутри

Question

У меня есть отзыв отзыв. Мне нравится, как он работает, когда экран меняется: он работает как img, он сохраняет некоторую пропорцию между шириной и высотой. Проблема заключается в тексте внутри. Как можно центрировать текст, горизонтальный и вертикальный? В то же время было бы хорошо, если бы было некоторое расстояние между текстом и лимитом div. Помните: все это в чувствительной среде.

Для проверки и играть: http://jsfiddle.net/xkr6v9yh/1/

HTML:

<div id="wrapper"> 
<div id="small">some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, </div> 
</div> 

CSS:

#wrapper { 
    position: relative; 
    margin:0 auto; 
} 


#small { 
    width: 100%; 
    padding-bottom: 50%;/* 50% of width of container */ 

    color: white; 
    text-align: center; 

    position: absolute; 
    top: 0; bottom: 0; left: 0; right: 0; 
    background: blue; 
} 

Answer 1

прикладной таблицы и таблицы ячейки свойство для выравнивания текста в середине.

#wrapper { 
 
\t position: relative; 
 
\t margin:0 auto; 
 
\t background: red; 
 
    display: table; 
 
    width: 100%; 
 
    height: 250px; 
 
} 
 

 

 
#small { 
 
\t width: 100%; 
 
    \t color: white; 
 
    \t text-align: center; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    \t background: blue; 
 
}

<div id="wrapper"> 
 
\t <div id="small">some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, </div> 
 
</div>

Answer 2

, как другой ответ, но с отношением выставиться: codepen to play with

#wrapper { 
 
    background: red; 
 
    display: table; 
 
    margin: auto; 
 
    width: 75%; 
 
    /* whatever you want to start with*/ 
 
    color: white; 
 
} 
 
#small { 
 
    background: blue; 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    padding: 1em; 
 
} 
 
/* set here a basic ratio to the container */ 
 

 
#wrapper:before { 
 
    content: ''; 
 
    display: table-cell; 
 
    padding-top: 50%; 
 
} 
 
/* FURTHER ? */ 
 

 
/* give a max-width to content ? */ 
 

 
#small>* { 
 
    max-width: 75%; 
 
    margin: 0.5em auto; 
 
}

<div id="wrapper"> 
 
    <div id="small"> 
 
    <p>some text, some text, some text, some text, some text, some tex</p> 
 
    <p>some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text, some text</p> 
 
    </div> 
 
</div>