我使用以下标记/ css垂直和水平居中一个div：
.wrapper {
display: table;
}
.content {
display: table-cell;
vertical-align: middle;
text-align: center;
}
<div class="wrapper">
<div class="content">
centered content
</div>
</div>
当浏览器足够宽时，我的内容看起来很好。但是，我想以某种方式定义一个较小的宽度，内容应该在调整浏览器的宽度时保持在内。我有文字，当它变得足够小时我不想进入浏览器的左右边缘，所以我想将它包装到更多的行上。响应性地处理这个问题的最佳方法是什么？