如何使用HTML或CSS实现网页居中？附代码排查冲突问题

问题排查及修复方案 #

一、HTML语法错误 #

你的<h1>Home</h1>写在了<head>标签内部，<head>仅可存放页面元信息、样式引用这类非可见内容，所有用户可见的内容必须放在<body>标签内，该错误会导致部分浏览器渲染逻辑异常，将h1移到<div id="wrap">内部最上方即可。
另外你给所有导航链接都加了active类，会导致所有导航都显示为当前页选中状态，实际只需要给当前页对应的a标签加该类即可。

二、CSS冲突导致居中失效的核心问题 #

• 你给html根元素设置了width: 840px和padding-left: 290px，直接把整个网页的根容器宽度锁死、还强制增加了左偏移，内部#wrap设置的margin: 0 auto是基于父容器宽度生效的，父容器本身就不是全屏状态，自然无法实现居中，直接删掉这两行配置即可。
• 导航栏.topnav-centered a的样式重复定义了三次，定位相关的配置逻辑互相覆盖，完全冗余，要实现导航横向排列居中，给.topnav-centered加text-align: center属性即可。
• footer设置了position: absolute; left:0; width:100%，直接脱离了父级#wrap的文档流，所以不会跟着内容区居中，要让它跟随内容对齐，直接删除absolute相关定位属性即可。

三、修正后的核心代码片段 #

修正后的HTML关键部分

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>
<link href="CSS/Style1.css" rel="stylesheet"/>
</head>
<body>
    <div id="wrap">
      <h1>Home</h1>
      <div class="topnav-centered">
        <a href="HomePage.html" class="active">Home</a>
        <a href="Booking.html">Booking</a>
        <a href="Info.html">Info</a>
        <a href="Store.html">Store</a>    
        <a href="FAQ.html">FAQ</a> 
      </div>
      <header></header>
      <section id="websiteBanner">
        <img src="Images/Website Banner.jpg" alt="Banner" id="Banner">
        <p></p> 
      </section>
      <section></section>
      <footer></footer>
    </div>
</body>
</html>

修正后的CSS关键部分

/* CSS Document */
html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
html, button, input, select, textarea {
    font-family: serif;
    color: #222;
}
.section { 
    font-size: 1em;
    line-height: 1.4;
}

h1 {
    text-align: center;
}

#wrap {
   width: 818px;
   margin: 0 auto;
}
body {
   background-color: #ddd;
}

.topnav-centered {
    width: 818px;
    padding-bottom: 7px;
    text-align: center;
}
.topnav-centered a {
  color: purple;
  padding: 5px 57px;
  text-decoration: none;
  font-size: 20px;
  display: inline-block;
}

.topnav-centered a:hover {
  background-color: #ddd;
}

.topnav-centered a.active {
  background-color: #333;
  color: white;
}

#infoTitle {
    text-align: center;
}
#Banner {
    width: 818px;
    padding-top: 10px;
    height: 230px;
}
section {
    background-color: mediumpurple;
}
footer {
    text-align: center;
    padding: 10px 0;
}

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