Html 保持纵横比并将文本居中

我有一个部门。我喜欢它在屏幕变化时的工作方式：它像一个img一样工作，在宽度和高度之间保持一定的比例。问题是里面的文字。如何使文本水平和垂直居中？同时，如果文本和div的限制之间有一定的距离就好了。记住：所有这些都是在一个响应环境中进行的

要检查和播放：

HTML:

---

应用表和表格单元属性以对齐正文中的文本。

#包装器{
位置：相对位置；
保证金：0自动；
背景：红色；
显示：表格；
宽度：100%；
高度：250px；
}
#小的{
宽度：100%；
颜色：白色；
文本对齐：居中；
显示：表格单元格；
垂直对齐：中间对齐；
背景：蓝色；
}

一些文本，一些文本，一些文本，一些文本，一些文本，一些文本，一些文本，一些文本，一些文本，一些文本，一些文本，一些文本，一些文本，一些文本，一些文本，一些文本，一些文本，一些文本，一些文本，一些文本，一些文本，一些文本，一些文本，

作为其他答案，但设定了比率：

#包装器{
背景：红色；
显示：表格；
保证金：自动；
宽度：75%；
/*你想从什么开始*/
颜色：白色；
}
#小的{
背景：蓝色；
显示：表格单元格；
文本对齐：居中；
垂直对齐：中间对齐；
填充：1em；
}
/*在此设置容器的基本比率*/
#包装工：以前{
内容：''；
显示：表格单元格；
垫面：50%；
}
/*进一步*/
/*为内容指定最大宽度*/
#小>*{
最大宽度：75%；
保证金：0.5em自动；
}

一些文字，一些文字，一些文字，一些文字，一些文字，一些文字，一些文字

一些文本，一些文本，一些文本，一些文本，一些文本，一些文本，一些文本，一些文本，一些文本，一些文本，一些文本，一些文本，一些文本，一些文本，一些文本，一些文本，一些文本，一些文本，一些文本

1-水平和垂直居中，2-屏幕变化时带有边距或填充物您是否要查找显示：flex:？或显示：表格/表格单元格将非常有用easily@harry：当屏幕更改时，文本可能为2,3。。。一行行文字。而且css3没有很好的浏览器支持。这就是你想要的吗？@Nrc：即使文本行数增加，这种方法也能支持。从IE9到IE8都支持转换，而IE8的支持从1月起由微软自己放弃。表格解决方案需要特定的高度才能工作。我不能使用它，因为div的行为必须像响应模式中的imgenvironment@Nrc你能告诉我们你的比例吗？或者查看我的答案并设置您的值以设置您要查找的正确比率。div的行为类似于img 600px 300px。我想这是2:1？@Nrc好的，这是50%的垂直填充。垂直%填充或边距以父对象的宽度为参照。我用这个值更新了我的答案

<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>

#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;
}