网站header、主体、footer无法居中 如何设置元素宽度为屏幕50%

• 原代码给html、body设置了display: table和display: table-cell的表格布局，这类布局的宽度计算逻辑和常规块级元素不同，很容易出现宽度不受控、对齐偏移
• 包裹header、内容区、footer的外层容器没有设置统一宽度约束，子元素的百分比宽度没有统一的参照基准，单独修改单个元素宽度自然会出现左对齐、居中对齐混乱的问题，默认状态下内容会直接铺满整个屏幕宽度

不用改动现有HTML结构，只需要调整CSS规则：

• 移除html、body上的表格布局属性，换回常规块级布局，避免宽度计算异常
• 给包裹所有页面内容的外层div设置统一宽度为50vw（即屏幕可视宽度的50%），添加margin: 0 auto让整个容器水平居中，所有子元素的百分比宽度都以这个容器为基准计算，自然对齐
• 保留原有侧边栏30%、正文区70%的宽度比例，以及所有原有视觉样式
• 补充响应式规则，小屏幕下自动调整容器宽度，避免内容过窄难以阅读

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-image: url('https://lifted.crd.co/assets/images/gallery01/a307cfec.png?v=a0ae4590');
  padding: 2rem 0;
}

@font-face {
  src: url(https://dl.dropbox.com/s/uougf9v63jmphoj/Jojoba.otf);
  font-family: jojoba;
}

/* 统一控制页面整体宽度和居中 */
body > div {
  width: 50vw;
  margin: 0 auto;
  font-family: jojoba;
  font-size: 18px;
}

/* 头部样式 */
header {
  padding: 10px;
  text-align: center;
  border-color: #000000;
  font-size: 20px;
  height: 35px;
  width: 100%;
  background: radial-gradient(circle, rgb(240, 242, 240, 1) 10%, rgba(217, 219, 218, 1) 43%, rgb(240, 242, 240, 1) 75%);
}

/* 侧边导航栏 */
nav {
  float: left;
  width: 30%;
  height: 300px;
  background: #f1f1f1;
  padding: 20px;
}

nav ul {
  list-style-type: none;
  padding: 0;
}

/* 正文内容区 */
article {
  float: left;
  padding: 20px;
  width: 70%;
  background-color: #ffffff;
  height: 300px;
  overflow-y: auto;
  direction: ltr;
  scrollbar-color: #d4aa70 #e4e4e4;
  scrollbar-width: thin;
}

/* 清除浮动避免高度塌陷 */
section::after {
  content: "";
  display: table;
  clear: both;
}

/* 页脚样式 */
footer {
  padding: 10px;
  text-align: center;
  color: white;
  height: 35px;
  width: 100%;
  vertical-align: middle;
  background: radial-gradient(circle, rgb(240, 242, 240, 1) 10%, rgba(217, 219, 218, 1) 43%, rgb(240, 242, 240, 1) 75%);
}

/* 响应式适配 */
@media (max-width: 1200px) {
  body > div {
    width: 70vw;
  }
}
@media (max-width: 768px) {
  body > div {
    width: 90vw;
  }
  nav,
  article {
    width: 100%;
    height: auto;
  }
}

• 如果觉得50%屏宽太窄，可以自行修改body > div的width值，比如改成60vw就是60%屏宽
• 如果需要保留原页面内容垂直居中的效果，把body的CSS替换为下面的代码即可：

body {
  font-family: Arial, Helvetica, sans-serif;
  background-image: url('https://lifted.crd.co/assets/images/gallery01/a307cfec.png?v=a0ae4590');
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
}

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