CSS布局中div设置align属性后无法居中对齐问题咨询

• HTML的align属性仅用于控制元素内部行内内容（比如文本、行内元素、行内块元素）的对齐方式，无法作用于内部的块级元素。你之前header、footer内部的<a>标签属于行内元素，所以align="right"可以生效；而main内部的.div是固定宽度的块级元素，父级的align="center"仅能让它内部的文本居中，无法控制它本身的位置。
• 额外提示：align是HTML已废弃的非标准属性，现代前端开发不推荐使用，所有对齐逻辑建议通过CSS实现。

方案1：给固定宽度块级元素设置自动左右边距（最推荐） #

在你的CSS中给.div类添加margin: 0 auto属性即可：

.div {
  border: 2px solid black;
  height: 350px; 
  background-color: rgb(193, 193, 218); 
  color: rgb(27, 23, 23); 
  width: 1000px;
  /* 新增以下属性 */
  margin: 0 auto;
}

这个方案兼容性最好，只要块级元素设置了明确宽度，就可以直接通过左右margin自动分配来实现水平居中。

方案2：给父级设置flex布局 #

如果需要同时控制父级内多个子元素的对齐，可以给main元素添加flex相关CSS：

.main {
  background-color: cadetblue;
  height: 600px;
  /* 新增以下属性 */
  display: flex;
  justify-content: center;
}

注意：如果用这个方案，原来main内部的<br>标签调整的垂直间距可能需要替换为flex的align-items或者padding-top属性实现，布局逻辑更统一。

你代码中多个<a>标签使用了同一个id="anchor"，id属性在单个HTML页面中必须唯一，重复id会导致DOM选择、锚点跳转等功能异常，建议替换为class：
把HTML里的id="anchor"全部改成class="anchor"，CSS选择器从#anchor改成.anchor即可。

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