设置CSS居中属性后HTML元素仍左对齐且第二段无法显示

两个异常分别对应两处代码错误：

• align-items、justify-content是Flex/Grid布局的专属属性，你没给#bar容器声明对应的布局模式，这两个属性写了也不会生效，内部元素默认按标准流靠左排列。另外你写的左右margin auto，作用是让#bar容器本身在它的父级元素里水平居中，根本控制不了容器内部的子元素。
• HTML没有原生<p2>标签，属于无效自定义标签，浏览器不会给它匹配默认的段落样式，自然没法正常展示成段落效果。

1. 给#bar容器开启Flex纵向布局，让你写的居中属性生效：

#bar {
  /* 开启flex布局 */
  display: flex;
  /* 让子元素纵向排列，匹配从上到下的内容结构 */
  flex-direction: column;
  /* 交叉轴（当前为水平方向）居中，实现子元素水平居中 */
  align-items: center;
  /* 主轴（当前为垂直方向）居中，不需要容器内内容垂直居中可以删掉这行 */
  justify-content: center;
  /* 让容器本身在父元素中水平居中 */
  margin-left: auto;
  margin-right: auto;
}

2. 把无效的<p2>标签替换为标准段落标签<p>：

<div id="bar">
  <h2>title</h2>
  <p>paragraphtext1</p>
  <img src="" alt="logo" />
  <img src="" alt="logo" width="720" />
  <img src="" alt="logo" />
  <img src="" alt="logo" width="720" />
  <img src="" alt="logo" />
  <p>hi</p>
</div>

补充提示：如果不需要让容器内所有内容在垂直方向居中，一定要删掉justify-content: center，否则当容器高度大于内容总高度时，内容会整体偏移到容器垂直中间位置，不符合常规从上到下的排版预期。

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