PC端固定宽度1200px上下居中网站布局实现

好的，这是一个专为PC端（1200px宽）设计的上下居中式结构的HTML网页源码。它采用了经典的“上-中-下”布局，并实现了水平居中，适合在电脑屏幕上浏览。 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>PC端上下居中网站 | 1200px固定宽度</title> <style> /* ===== 基础重置 & 全局设定 ===== */ * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #f5f7fa; /* 柔和色，仅PC可见 */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.6; color: #333; min-height: 100vh; /* 确保全屏高度 */ display: flex; flex-direction: column; align-items: center; /* 水平居中整个网站容器 */ } /* ===== 网站主容器 ===== */ .site-wrapper { width: 1200px; /* 固定宽度，仅PC */ max-width: 100%; /* 防止溢出小窗口（但仍保持1200px内） */ min-height: 100vh; /* 与body同高，确保占满视口 */ display: flex; flex-direction: column; background-color: #ffffff; /* 白色内容区域 */ box-shadow: 0 0 30px rgba(0, 0, 0, 0.08); margin: 0 auto; /* 水平居中备用 */ } /* ===== 头部 ===== */ .header { background: linear-gradient(135deg, #2c3e50, #3498db); color: #ffffff; padding: 20px 30px; text-align: center; } .header h1 { font-size: 2rem; letter-spacing: 2px; margin-bottom: 5px; } .header p { font-size: 0.95rem; opacity: 0.9; } /* ===== 主导航 ===== */ .nav-bar { background-color: #34495e; padding: 0 20px; display: flex; justify-content: center; /* 导航链接居中 */ gap: 30px; flex-wrap: wrap; /* 万一宽度超了可以换行，但1200px足够 */ } .nav-bar a { color: #ecf0f1; text-decoration: none; padding: 14px 0; font-weight: 500; transition: color 0.2s; border-bottom: 3px solid transparent; } .nav-bar a:hover { color: #f1c40f; border-bottom-color: #f1c40f; } /* ===== 中间主要内容区域（自动填充剩余空间） ===== */ .main-content { flex: 1; /* 撑满剩余垂直空间 */ padding: 40px 30px; background-color: #fafbfc; } /* 内容卡片样式 */ .content-grid { display: flex; flex-wrap: wrap; gap: 25px; justify-content: center; } .card { background: #ffffff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); padding: 25px 20px; flex: 1 1 250px; /* 最小250px，可伸展 */ max-width: 350px; transition: transform 0.2s, box-shadow 0.2s; } .card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); } .card h3 { font-size: 1.3rem; color: #2c3e50; margin-bottom: 12px; border-left: 5px solid #3498db; padding-left: 12px; } .card p { color: #555; font-size: 0.95rem; } /* 附加说明区 */ .info-section { margin-top: 40px; padding: 20px 25px; background: #eef2f7; border-radius: 10px; border-left: 6px solid #3498db; } .info-section h2 { font-size: 1.4rem; margin-bottom: 10px; color: #2c3e50; } /* ===== 底部 ===== */ .footer { background-color: #2c3e50; color: #bdc3c7; text-align: center; padding: 18px 30px; font-size: 0.9rem; border-top: 1px solid #3d5166; } .footer a { color: #ecf0f1; text-decoration: none; margin: 0 8px; } .footer a:hover { text-decoration: underline; color: #f1c40f; } /* ===== 辅助：不支持移动端，PC专用提示（可选） ===== */ /* 隐藏移动端适配元素，保持纯粹PC体验 */ @media (max-width: 1200px) { body { background: #e74c3c; /* 宽度不足时显示红色警示（视觉提示） */ } .site-wrapper { box-shadow: none; } /* 仍然保持1200px宽度，但若屏幕小于1200px会出现滚动条 */ } </style> </head> <body> <div class="site-wrapper">  <header class="header"> <h1>🏛️ 中正 · 居所</h1> <p>PC 端固定宽度 1200px · 上下居中结构</p> </header>  <nav class="nav-bar"> <a href="#">首页</a> <a href="#">关于</a> <a href="#">服务</a> <a href="#">博客</a> <a href="#">联系</a> </nav>  <main class="main-content"> <div class="content-grid"> <div class="card"> <h3>📐 上下居中</h3> <p>使用 flex 布局，main-content 自动拉伸填满垂直剩余空间，从而实现视觉居中效果。</p> </div> <div class="card"> <h3>🖥️ 固定宽度 1200px</h3> <p>网站整体宽 1200px 并水平居中，在宽屏显示器上两侧留白，适合办公与设计场景。</p> </div> <div class="card"> <h3>🚫 不支持手机</h3> <p>未添加移动端 meta viewport 适配，无媒体查询断点，专为桌面浏览器设计。</p> </div> </div> <div class="info-section"> <h2>💡 布局说明</h2> <p>本模板采用 <strong>flex-direction: column</strong> 配合 <strong>flex: 1</strong> 让主内容区自适应高度。</p> <p>整体容器 <code>.site-wrapper</code> 宽度固定 1200px，通过 <code>align-items: center</code> 实现水平居中。头部、导航、内容、底部依次排列，内容区自动撑满剩余空间，达到上下居中的视觉效果。</p> <p>👉 当浏览器窗口宽度小于 1200px 时，会出现水平滚动条，保持设计完整性（红色为视觉提示）。</p> </div> </main>  <footer class="footer"> <p>© 2025 上下居中结构 · 专为 PC 设计 | <a href="#">隐私</a> · <a href="#">条款</a></p> </footer> </div> </body> </html> ``` ### 🧩 布局核心机制 * **垂直居中（上下结构）**：通过 `body` 和 `.site-wrapper` 的 `min-height: 100vh` 确保容器占满屏幕高度，再使用 `main-content` 的 `flex: 1` 自动填充头部、导航、底部之外的剩余空间，实现内容区“撑满”效果。 * **水平居中（固定宽度）**：`.site-wrapper` 宽度固定为 `1200px`，并通过 `body` 的 `display: flex; align-items: center;` 实现水平居中。 * **PC 专用，无移动适配**：未设置移动端的 `viewport` 缩放，也未加入响应式断点 (`media queries`)。当屏幕宽度小于 1200px 时，页面会出现水平滚动条，确保原有布局不被打乱。 --- ######[AI写代码神器 | 2169点数解答 | 2026-06-11 17:27:53]

服务商

更多选项

快捷项

自定义