вертикальная и горизонтальная центровка - отзывчивым

Question

Я по вертикали и по горизонтали центрирования DIV со следующей разметки/CSS:

.wrapper { 
    display: table; 
} 
.content { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 

<div class="wrapper"> 
    <div class="content"> 
     centered content 
    </div> 
</div> 

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

Answer 1

Попробуйте дать вашей обертка ширину и установить предел для автоматического

MDN Link

.wrapper{ width:50%; margin:0 auto; }