CSS Grid布局下Header左右内容排布及垂直居中实现咨询

嘿，我明白你遇到的问题了——想要让header里的文本靠右同时垂直居中，但之前加div用flex属性没生效对吧？这是因为你没把header本身设置成flex容器，所以那些对齐属性根本起不了作用。

解决方案 #

直接给#pageHeader添加flex布局相关属性就行，不用额外加div。修改后的样式如下：

#pageHeader {
  grid-area: header;
  display: flex;
  justify-content: flex-end; /* 水平方向靠右对齐 */
  align-items: center; /* 垂直方向居中 */
}

为什么这样有效？ #

• display: flex：把header元素转化为flex容器，这样它内部的子元素（也就是你的文本）就能使用flex布局的对齐规则
• justify-content: flex-end：控制主轴（默认是水平方向）上的元素对齐，这里设置为靠右
• align-items: center：控制交叉轴（默认是垂直方向）上的元素对齐，实现垂直居中

完整修改后的CSS代码 #

body {
 display: grid;
 grid-template-areas: "header header header" "nav article ads" "nav footer footer";
 grid-template-rows: 80px 1fr 70px;
 grid-template-columns: 20% 1fr 15%;
 grid-row-gap: 10px;
 grid-column-gap: 10px;
 height: 100vh;
 margin: 0;
}
header, footer, article, nav, div {
 padding: 1.2em;
 background: gold;
}
#pageHeader {
 grid-area: header;
 display: flex;
 justify-content: flex-end;
 align-items: center;
}
#pageFooter {
 grid-area: footer;
}
#mainArticle {
 grid-area: article;
}
#mainNav {
 grid-area: nav;
}
#siteAds {
 grid-area: ads;
}
/* Stack the layout on small devices/viewports. */
@media all and (max-width: 575px) {
 body {
 grid-template-areas: "header" "article" "ads" "nav" "footer";
 grid-template-rows: 80px 1fr 70px 1fr 70px;
 grid-template-columns: 1fr;
 }
}

HTML部分不需要做任何修改，保持原来的结构就好：

<header id="pageHeader">Header</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">Nav</nav>
<div id="siteAds">Ads</div>
<footer id="pageFooter">Footer</footer>

这样修改后，header里的文本就会完美靠右且垂直居中，而且在响应式布局下也能正常工作哦！

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