Electron游戏客户端Exit按钮空白栏移除及顶部居中实现问题

我在开发Electron游戏客户端时，给Exit按钮写完代码后，按钮旁边出现了一大块空白栏，同时尝试用translateX(百分比)把按钮移到页面顶部居中也没成功，求解决方法。

一、移除按钮旁的空白栏 #

你的代码里有几个导致空白的问题，逐个修正：

• HTML多余标签：按钮代码末尾多了一个</button>闭合标签，直接删掉，多余标签会引发渲染异常。
• CSS无效属性：length: 30px是错误属性，替换为height: 30px来设置按钮高度。
• 类名大小写不一致：CSS里写了.Exitbutton（小写b），但按钮的类是.ExitButton（大写B），浏览器对类名大小写敏感，把.Exitbutton改成.ExitButton才能让背景透明样式生效。
• Webview默认样式：Electron的webview默认可能带有margin或padding，给webview添加样式让它占满容器，避免挤压出空白。

修正后的完整CSS：

webview {
  width: 100%;
  height: 100vh;
  display: block;
}

.ExitButton {
  color: red;
  font-size: 25px;
  max-width: 55px;
  height: 30px;
  border-color: black;
  transition-duration: 0.4s;
  cursor: pointer;
  text-align: center;
  background-color: transparent;
}

.ExitButton:hover {
  background-color: black;
}

修正后的HTML：

<webview src="https://bapbap.gg"></webview>
<button class="ExitButton" onclick="alert('Are you sure you want to exit BapClient?')">Exit</button>

二、实现按钮顶部居中 #

用translateX居中需要配合绝对定位，让按钮脱离文档流，再通过left: 50%和translateX(-50%)实现水平居中，同时用top属性固定在顶部。给按钮添加以下CSS属性（保留原有属性，新增这些）：

.ExitButton {
  position: absolute;
  top: 10px; /* 距离顶部的间距，可自行调整数值 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 999; /* 确保按钮显示在webview上方，不被遮挡 */
}

这样按钮就能固定在页面顶部居中位置，同时不会被webview内容遮挡。

内容的提问来源于stack exchange，提问作者Ian