设置display:block的inner-header中头部文本无法居中，求解决方案

不需要移除inner-header，你的问题是几个CSS属性冲突导致的，调整以下代码就能解决：

问题根源 #

1. .inner_header 设置为 display:block 时，align-items、justify-content 这些flex布局属性完全无效——这些属性只对flex容器生效。
2. .logo_container 用了 float:right 和 position:relative; right:40%，这种手动偏移的写法不仅不灵活，还直接破坏了居中逻辑，浮动元素也会脱离正常文档流。

修复后的CSS代码 #

替换对应部分的CSS：

.header{
   width: 100%;
   height: 300px;
   background-color: #101010;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
}

.inner_header{
    width: 1000px;
    height: 100%;
    display: flex; /* 改为flex容器，启用flex对齐属性 */
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: red;
    margin-top: 60px;
}

.logo_container{
    text-align: center; /* 保证内部文本/图片水平居中 */
    /* 移除float:right、position:relative、right:40% */
}

逻辑说明 #

• 把inner_header改成flex容器后，align-items:center和justify-content:center会让内部的logo_container在水平、垂直方向都居中，完美实现你要的效果。
• 去掉logo_container的浮动和手动偏移，让它在flex容器里自然居中，同时text-align:center确保容器内的文本、图片自身也水平对齐。
• 保留inner_header的宽度限制，依然能起到你想要的页面优化作用，完全不需要移除它。

额外优化小技巧 #

• 删掉h1标签里的内联style="text-align:center;"，父容器的样式已经能覆盖，避免样式冗余。
• 如果要适配移动端，把inner_header的width:1000px改成max-width:1000px，再加padding:0 20px，防止窄屏内容溢出。

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