javascript - CSS 缩放 Div 居中

Question

我有一个关于 <div id='divTwo'> 的问题在另一个里面 <div id='divOne'> .这很正常，很容易做到，但是在这种情况下，我有 transform: scale();与 transform-origin: 50% 50% 0px;应用于“divTwo”

#divOne {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

#divTwo {
    width: 1024px;
    height: 768px;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    border-left: 131px solid #333333;
    border-right: 131px solid #333333;
    border-top: 47.5px solid #333333;
    border-bottom: 47.5px solid #333333;
    border-radius: 55px;
}

如果应用于变换的比例和窗口大于 outerWidth()，则“divTwo”居中没有问题。但是，当“divTwo”被缩放并且窗口小于或等于 outerWidth() 时。 div 将不再居中，而是将其中心点放置在浏览器的右侧，如果“divTwo”的一半不在浏览器的右侧，则会导致这种情况。改变 transform-origin: 50% 50% 0px;至 transform-origin: 0% 50% 0px;只要您不垂直缩放就可以工作，反之亦然。

jsfiddle 示例:https://jsfiddle.net/yvyz49zp/

谢谢。我觉得缺少一些明显的东西。

Answer 1

我在 jsfiddle 中相对快速地完成了这个 - 不需要 javascript。只是玩弄值(value)观，直到你得到你喜欢的东西。

代码:

body {
    background: lightblue;
}

#container {
    display: inline-block;
    position: absolute;
    width: 50%;
    right: 50%;
    top: 50%;
    transform: translate(50%, -50%);
}
#dummy {   
    margin-top: 75%; /* Using the dummy is the trick - it locks the aspect ratio (at 4:3 in this case) */
}
#device {
    position: absolute;
    top: 10%;
    bottom: 10%;
    left: 0;
    right: 0;
    background-color: #333;
    border-radius: 10%;
}

#screen {
    position: absolute;
    width: 70%;
    height: 80%;
    background: #0f0;    
    right: 50%;
    top: 50%;
    transform: translate(50%, -50%);
}

<div id="container">
    <div id="dummy"></div>
    <div id="device">
        <div id="screen"></div>
    </div>
</div>