CSS居中媒体内容问题：移动端正常，桌面端内容偏右求助

嘿，我看了你的代码和问题描述，桌面端内容偏右、全屏布局失效的问题，主要有两个核心原因：HTML结构不符合规范，还有.display类的CSS属性冲突，咱们一步步来修复：

首先，修复最关键的HTML结构问题 #

你的所有页面内容都没放在<body>标签里！HTML5要求所有可见内容必须包裹在<body>内，浏览器虽然会自动补全标签，但这种不规范的写法很容易导致桌面端全屏时的布局解析异常，这大概率是你桌面端失效的主要原因。

然后，重构CSS解决居中问题 #

你的.display类里重复写了两次display属性（block和flex），而且缺少全局样式重置，浏览器默认的body margin会让整体布局偏移。咱们简化并修复CSS：

修改后的完整CSS：

@charset "utf-8"; 
/* CSS Document */ 

/* 重置全局默认样式，消除浏览器自带的margin/padding干扰 */
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.content {
  max-width: 500px;
  margin: auto;
}

/* 重构display类，用flex统一控制居中，避免属性冲突 */
.display{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center; /* 可选，需要垂直居中时保留 */
  width: 100%; /* 让容器占满父元素宽度，确保居中基准正确 */
  margin: 0 auto;
  padding: 0;
}

.button {
  background-color: #FFFFFF;
  border: #000000;
  border-bottom-width: 2px;
  text-decoration-color: #FFFFFF;
  padding: 15px 32px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
}

.help-block.with-errors {
  color: #ff0000;
  margin-top: 5px;
}

.overlay {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:rgba(0, 0, 0, 0.8);
  z-index:100;
  color:white;
  display: none;
  font-family: 'source_sans_proregular';
  line-height: 25px;
  -webkit-text-size-adjust:none;
  text-size-adjust:none;
}

.container {
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  border:0;
}

.container td {
  vertical-align: middle;
  text-align: center;
}

.centerAlign {
  text-align: center;
}

.margin2x {
  margin-bottom: 24px;
}

.margin1x {
  margin-bottom: 12px;
}

修改后的HTML：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>mAdjetey is getting an upgrade</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="index_files/mine.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="index_files/favicon.png">
</head>
<body>
<a name="tepin"></a>
<div class="display">
  <img src="index_files/uc_main.png" style="max-width:100%" height="auto" alt="Website under redesign">
</div>
<div class="display">
  <div class="w3-topbar">
    <a href="email.html"><img src="index_files/icon_email.png" alt="Email"></a>
  </div>
</div>
<div class="display">
  <a href="#tepin" class="button">Back to top of page</a>
</div>
</body>
</html>

修复说明： #

1. 给页面内容加上<body>标签，符合HTML规范，解决浏览器解析异常问题；
2. 重置body的margin和padding，消除默认样式导致的布局偏移；
3. 简化.display类，用flex布局统一控制水平居中，width:100%确保容器以整个视口宽度为基准，不会出现偏右；
4. 去掉HTML里的align="center"，用CSS统一控制样式，符合HTML5最佳实践。

修改后你再测试桌面端全屏和移动端，应该就能实现稳定的居中效果，底部链接的堆叠也能正常工作啦~

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