html - 在没有 JavaScript 的情况下，获取 CSS %-sized 元素向中心而不是 Angular 落缩放

Question

是否有一些技巧可以与 CSS 一起使用，使 % 大小的元素向其自身的中心而不是向 Angular 缩放？

约束:

• 元素可以绝对定位在页面上的任何位置，并且它应该仍然有效
• 元素大小与页面宽度/高度相关

这是一张有望帮助说明问题的图片:

据我所知，除了使用 JavaScript 之外，没有其他解决方案。

请注意，我只是在寻找纯 HTML/CSS 解决方案，而不使用任何 JS 来解决这个问题(尽管如果您知道这方面的 JS 库，请务必发表评论)。

Answer 1

你的意思是像this fiddle?

.positioner {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 25%;
    padding-bottom: 25%;
}

.box {
    background-color: purple;
    position: absolute;
    top: -50%;
    left: -50%;

    width: 100%;
    padding-bottom: 100%;
}

它使用包装器 DIV，其中左上角绝对定位到页面上您想要的位置。然后你在那个 TL Angular 上调整你的实际 DIV 的中心。框的大小向外缩放。

<div class="positioner">
    <div class="box"></div>
</div>

如果您可以确认这就是您的意思，我们接下来可以让它与内容一起使用。参见 this .

或使用翻译:http://jsfiddle.net/6rQwx/1/