HTML+CSS入门：如何实现header内图片的水平与垂直同时居中？

当你给header添加display: flex和align-items: center实现垂直居中后，原来的text-align: center会失效——这是因为flex容器的布局规则和普通块级容器不同，text-align无法控制flex子元素的水平对齐。

只需要给header再加上justify-content: center属性，就能同时实现水平+垂直居中，甚至可以删掉没用的text-align: center：

修改后的CSS代码：

header {
  background-color: blue;
  height: 118px;
  width: 1024px;
  display: flex;
  align-items: center; /* 控制垂直方向居中 */
  justify-content: center; /* 控制水平方向居中 */
}

.container {
  margin-left: auto;
  margin-right: auto;
  width: 1024px;
}

HTML代码保持不变：

<div class="container">
  <header>
    <img src="https://i.imgur.com/dKLmNz6.png" alt="JPAD Logo">
  </header>
</div>

补充说明 #

• align-items: center是让flex子元素在**交叉轴（垂直方向）**上居中
• justify-content: center是让flex子元素在**主轴（水平方向）**上居中
• 一旦容器设置为display: flex，内部子元素默认是flex项，text-align这类针对行内元素的居中方式就不再生效了

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