我想在网页上放大300％以上后将左右内容居中放置，我已经尝试了很多方法，但是仍然没有答案，任何人都可以在这里给我帮助。
复制并粘贴以制作新网页，则看不到粘贴在小提琴或代码墙上。
的HTML：
<body>
<div id="lower_body">
<h1>center content</h1>
<div id="outer_warpper">
<div id="outer">
<div id="left"><h1>left</h1></div>
<div id="right"><h1>right</h1></div>
</div>
</div>
</div>
</body>
CSS：
#lower-body {
margin: 0px;
padding: 0px;
}
#outer_warpper {
width: 100%;
height: 100%;
margin: 0px;
padding-top: 2%;
padding-bottom: 2%;
background-color: yellow;
overflow: hidden;
}
#outer {
background-color: black;
text-align: center;
vertical-align: middle;
display: table;
margin:0px auto;
overflow: hidden;
}
#right {
width: 450px;
height: 350px;
display: inline-block;
vertical-align: middle;
background-color: red;
}
#left{
width: 450px;
height: 350px;
display: inline-block;
vertical-align: middle;
background-color: grey;
}
h1{
text-align: center;
}
如您所见，当它达到300％或以上（按Ctrl +鼠标滚动）时，左右文本不再位于中间，因为它以某种方式向左推动
感谢您的帮助。
最佳答案
发生这种情况是因为您明确提到了width：450px。您应该以％定义宽度，或者尝试