我有这两个按钮，它们在1920X1080上工作正常，但当我调整窗口大小或在另一台分辨率不同的设备上打开网页时，它们会离开屏幕。
#custom-button {
background-color: transparent;
border: none;
cursor: pointer;
position: absolute;
top: 55%;
left: -59%;
animation: riseAnimationitch 2s ease-in-out;
}
#custom-button2 {
background-color: transparent;
border: none;
cursor: pointer;
position: absolute;
top: 55%;
left: -33%;
animation: riseAnimationgit 2s ease-in-out;
}字符串
我希望它能动态调整大小与我的其他按钮和图像。
我试着在身体块上乱来乱去，试图得到一些其他的结果。
body {
font-family: 'M PLUS Rounded 1c', sans-serif;
background-image: url('wallpaper.png');
background-repeat: no-repeat;
background-size: cover;
max-width: 1920px; /* Set a maximum width for the body */
margin: 0 auto; /* Center the body horizontally */
}型
1条答案
按热度按时间uyto3xhc1#
所以，从我所能告诉，你是试图中心按钮的绝对中心的视口（可见窗口）的一个页面。
这是非常合乎逻辑的为什么按钮去屏幕外：当视口被调整大小时，其尺寸以及因此与像素量相对应的所有百分比改变，从而解决了使对齐混乱的问题。
为了解决这个问题，
首先，我会移除这个位置：绝对，顶部和左侧，您已设置。然后，我将这两个按钮（#custom-button & #custom-button 2）放在代码html端的div中，我将向其添加以下css：
字符串
让我解释一下
我创建了一个包含按钮的div：
型
然后：我将div的显示设置为grid，以便按钮一个在另一个下面
它现在的样子（我在div上添加了一个彩色的身体背景和一个红色的边框，使一切都更明显）：
，
将位置设置为固定，这样div是浮动的，不会改变页面的布局，并且可以轻松移动
，
将除法的左上角设置为50%
的
**此时，**按钮几乎正好位于视口的中心。唯一剩下的是向左和向上移动一半的div。为此，我使用了transform css属性，并将其值定义为translate（-50%，-50%）*translate in case意味着移动 *
这就是了！
的
两个完美居中的按钮！
当然，红色框对你来说是不可见的，因为我使用border属性设置了它，背景是你的图片（wallpaper.png）。
可选：
为了确保我们创建的div永远不会比viewport大，从而导致溢出，我们可以执行以下操作：
型