当我放大或缩小时，不能让窗口停留在网站中间 我不能让我创建的窗口停留在网站的中间。我发现使用position:fixed和top:50%；左：50%有效，但为了使窗口在100%缩放时正好位于页面中间，我需要将左和顶值设置为30%，idk如何解决此问题。 代码如下： <body> <div class="container"> <div class="window" id="win"> <div class="layover"> <div class="h2"> <h2>Oops!</h2> </div> <div class="yesandno"> <figure class="yes"> <button onclick="window.location.href= 'espanol.html';">Si</button> </figure> <figure class="no"> <button onclick id="buttonn">No</button> </figure> </div> <div class= "langmessage"> Hemos detectado que el idioma de su ordenador se encuentra en español. ¿Le gustaría utilizar la versión en español de nuestro sitio web? </div> </div> <script type="text/javascript"> var lang= navigator.language; if (""+ lang == "es-US") { var div= document.getElementById("win"); } var button= document.getElementById("buttonn") buttonn.onclick= function(){ var div = document.getElementById("win"); if (div.style.display !== "none") { div.style.display = "none"; } } </script> </div>
将其用于.window类 结果：当我放大或缩小时，不能让窗口停留在网站中间 我不能让我创建的窗口停留在网站的中间。我发现使用position:fixed和top:50%；左：50%有效，但为了使窗口在100%缩放时正好位于页面中间，我需要将左和顶值设置为30%，idk如何解决此问题。 代码如下： <body> <div class="container"> <div class="window" id="win"> <div class="layover"> <div class="h2"> <h2>Oops!</h2> </div> <div class="yesandno"> <figure class="yes"> <button onclick="window.location.href= 'espanol.html';">Si</button> </figure> <figure class="no"> <button onclick id="buttonn">No</button> </figure> </div> <div class= "langmessage"> Hemos detectado que el idioma de su ordenador se encuentra en español. ¿Le gustaría utilizar la versión en español de nuestro sitio web? </div> </div> <script type="text/javascript"> var lang= navigator.language; if (""+ lang == "es-US") { var div= document.getElementById("win"); } var button= document.getElementById("buttonn") buttonn.onclick= function(){ var div = document.getElementById("win"); if (div.style.display !== "none") { div.style.display = "none"; } } </script> </div>,javascript,html,css,Javascript,Html,Css,将其用于.window类 结果： .window{ 背景：url（图片/蓝色抽象无噪音网站background image.jpg）； 边界半径：12px； 不透明度：1； z指数：1； 盒影：2px1px2.82px1.8pxRGBA（209,55,55,0.486），0px3px5.88px0.12pxRGBA（211,49,49,0.514）； 宽度：476px； 高度：276px； 背景颜色：蓝色； 位置：绝对；/*也可以固定*/ 左：0；右：0； 顶部：0；底部：0； 保证金：自动；
.window{
背景：url（图片/蓝色抽象无噪音网站background image.jpg）；
边界半径：12px；
不透明度：1；
z指数：1；
盒影：2px1px2.82px1.8pxRGBA（209,55,55,0.486），0px3px5.88px0.12pxRGBA（211,49,49,0.514）；
宽度：476px；
高度：276px；
背景颜色：蓝色；
位置：绝对；/*也可以固定*/
左：0；右：0；
顶部：0；底部：0；
保证金：自动；
/*这是为了解决“窗口小于内容时不会剪切内容”的问题：*/
最大宽度：100%；
最大高度：100%；
}
.中途停留{
背景色：rgba（100,99,92,0.699）；
位置：绝对位置；
右：0px；
顶部：0px；
宽度：100%；
身高：100%；
边界半径：12px；
}
.h2{
位置：绝对位置；
左：12px；
字号：900；
字体大小：20px；
颜色：白色；
字体系列：无衬线；
}
yesandno先生{
高度：80px；
宽度：250px；
位置：绝对位置；
顶部：200px；
左：217px；
}
.是的{
显示：内联块；
位置：绝对位置；
高度：30px；
宽度：80px；
边际：0px；
左：100px；
}
.是>按钮{
显示：块；
光标：指针；
边际：0px；
填充：0px；
边界：0px；
边界半径：8px；
身高：100%；
宽度：100%；
颜色：白色；
字号：900；
字体大小：13px；
字体系列：无衬线；
不透明度：1；
z指数：2；
背景色：rgba（1291271270.808）；
}
不{
显示：内联块；
位置：绝对位置；
高度：30px；
宽度：80px；
边际：0px；
右：300px；
}
.no>按钮{
显示：块；
光标：指针；
边际：0px；
填充：0px；
边界：0px；
边界半径：8px；
身高：100%；
宽度：100%；
颜色：白色；
字号：900；
字体大小：13px；
字体系列：无衬线；
不透明度：1；
z指数：2；
背景色：rgba（1291271270.808）；
}
朗格曼先生{
位置：绝对位置；
顶部：80px；
文本对齐：居中；
字号：900；
字体大小：13px；
字体系列：无衬线；
颜色：白色；
左：10px；
右：10px；
}
哎呀！
硅
不
埃斯帕尼奥尔地区的血液检测系统。《西班牙国家新闻网》的实用版本？
var lang=navigator.language；
如果（“+lang==”es US”）{
var div=document.getElementById（“win”）；
}
var button=document.getElementById（“buttonn”）
buttonn.onclick=函数（）{
var div=document.getElementById（“win”）；
如果（div.style.display！=“无”）{
div.style.display=“无”；
}
}
.window{
position: fixed;
border-width: 0px;
top: 30%;
left: 30%;
padding: 0px;
background: url(images/blue-abstract-noise-free-website-background-image.jpg);
border-radius: 12px;
width: 476px;
height: 276px;
opacity: 1;
z-index: 1;
box-shadow: 2px 1px 2.82px 1.8px rgba(209, 55, 55, 0.486), 0px 3px 5.88px 0.12px rgba(211, 49, 49, 0.514);
}
.layover{
background-color: rgba(100, 99, 92, 0.699);
position: absolute;
right: 0px;
top: 0px;
width: 100%;
height: 100%;
border-radius: 12px;
}
.h2{
position: absolute;
left: 12px;
font-weight: 900;
font-size: 20px;
color: white;
font-family: sans-serif;
}
.yesandno{
height: 80px;
width: 250px;
position: absolute;
top: 200px;
left: 217px;
}
.yes{
display: inline-block;
position: absolute;
height: 30px;
width: 80px;
margin: 0px;
left: 100px;
}
.yes > button{
display: block;
cursor: pointer;
margin: 0px;
padding: 0px;
border: 0px;
border-radius: 8px;
height: 100%;
width: 100%;
color: white;
font-weight: 900;
font-size: 13px;
font-family: sans-serif;
opacity: 1;
z-index: 2;
background-color: rgba(129, 127, 127, 0.808);
}
.no{
display: inline-block;
position: absolute;
height: 30px;
width: 80px;
margin: 0px;
right: 300px;
}
.no > button{
display: block;
cursor: pointer;
margin: 0px;
padding: 0px;
border: 0px;
border-radius: 8px;
height: 100%;
width: 100%;
color: white;
font-weight: 900;
font-size: 13px;
font-family: sans-serif;
opacity: 1;
z-index: 2;
background-color: rgba(129, 127, 127, 0.808);
}
.langmessage{
position: absolute;
top: 80px;
text-align: center;
font-weight: 900;
font-size: 13px;
font-family: sans-serif;
color: white;
left: 10px;
right: 10px;
}
.window{
background: url(images/blue-abstract-noise-free-website-background-image.jpg);
border-radius: 12px;
opacity: 1;
z-index: 1;
box-shadow: 2px 1px 2.82px 1.8px rgba(209, 55, 55, 0.486), 0px 3px 5.88px 0.12px rgba(211, 49, 49, 0.514);
width: 476px;
height: 276px;
background-color: blue;
position:absolute; /*it can be fixed too*/
left:0; right:0;
top:0; bottom:0;
margin:auto;
/*this to solve "the content will not be cut when the window is smaller than the content": */
max-width:100%;
max-height:100%;
}