css样式填充,div内的div CSS样式 - 使用填充来居中内部div的外部？

这比复杂一点的答案要复杂得多。这可以通过填充完成，但是我觉得这种方法对于你正在做的事情来说是最顺利和最稳定的结果，对于响应式网站也非常有效，所以在您缩放屏幕尺寸时不会中断。

下面是这个动作的演示，所以你可以随着我在说什么跟着，看完整的代码在同一时间：

好了，所以首先，刚设置你的外部股利，我基本上只设置position: relative;就可以了，其他一切都很好。这只是因为我将框架设置为position: absolute;，我希望它相对于这个外部div。

之后，让我们看看变化框架...

position: absolute;

top: 10%;

bottom: 20%;

left: 15%;

right: 15%;

这些样式服务拉伸div的界限出某些点的目的。请注意，框架元素上没有设置高度或宽度，必须将其取出。基本上，这些样式表示div的顶部将从外部div的顶部起10％。底部将是从外部底部的20％..等等。我使用百分比而不是像素，因为这将确保定位适应屏幕的任何宽度。

请注意，我在框架上设置了一个虚线边框，以便您可以随时查看框的大小和位置。

我并不担心文本内容的垂直居中，因为我相当肯定您的文本效果插件可以处理该问题。只要让我知道，如果我在这方面是错的，我可以扩大这一点。

现在，还有一个挑战是，一旦屏幕达到一定的尺寸，图像开始比外部容器的高度更小。这可能不是你想要的东西，所以我加了一个媒体查询：

@media only screen

and (max-width: 1060px) {

#outer {

height: 0;

padding-top: 47.85%;

}

}

这样做是适用的风格后，才显示屏变是一定的宽度。我根据图像开始缩小容器边缘的点来选择最大宽度。

至于应用的样式，这是保持容器长宽比在重新调整大小时的一个小技巧。我将height设置为0，然后使用padding-top重新创建高度。我使用的数字(47.85％)是图像高度与宽度的近似比率。 (图像宽度高达47.85％。)现在，这将开始缩放整个容器与屏幕，以匹配图像。因为你的框架是绝对定位的，所以它会留在周围，并保持它基于百分比的位置。

有一件事我没有做，你可能会感兴趣的是设置另一个媒体查询一旦图像宽度开始变得非常宽，底部被切断。此时，您可以将框架底部设置为0%，以便与其匹配。 (您可能还需要定期更新top属性，因为屏幕变得越来越宽，这只是因为您的设置高度会切断图像，使得百分比无关紧要。)

在该示例中，我链接到，请尝试重新调整底部框架宽度的大小，并观察虚线如何保持正确的位置，并调整内部的内容。同时注意容器如何保持设定的高度，直到图像太小，然后所有东西都开始缩小。

我只能看到一个明显的问题，那就是因为所有的文本内容都被逐个字母地定位，重新调整屏幕大小会导致元素溢出，直到出现新的幻灯片，并且字母根据新的宽度重新定位。这只是要继续前进的事情。