垂直和水平居中 - 响应式

Question

我使用以下标记/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>

当浏览器足够宽时，我的内容看起来不错。但是，我想以某种方式定义在调整浏览器宽度时内容应保持的较小宽度。当文本变得足够小时，我不想在浏览器的左右边缘出现文本，所以我想将它换成更多行。响应式处理此问题的最佳方法是什么？

Answer 1

尝试给你的包装器一个宽度并将边距设置为自动

MDN Link

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