你想要这个?

html, body { margin: 0; padding: 0; } .container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100vh; grid-gap: 0px 0px; } .left_bg { display: subgrid; background-color: #3498db; grid-column: 1 / 1; grid-row: 1 / 1; z-index: 0; } .right_bg { display: subgrid; background-color: #ecf0f1; grid-column: 2 / 2; grid_row: 1 / 1; z-index: 0; } .text { font-family: Raleway; font-size: large; text-align: center; } <div class="container"> <!--everything on the page--> <div class="left_bg"> <!--left background color of the page--> <div class="text"> <!--left side text content--> <p>Review my stuff</p> </div> </div> <div class="right_bg"> <!--right background color of the page--> <div class="text"> <!--right side text content--> <p>Hire me!</p> </div> </div> </div>

你想要这个?

html, body { margin: 0; padding: 0; } .container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100vh; grid-gap: 0px 0px; } .left_bg { display: subgrid; background-color: #3498db; grid-column: 1 / 1; grid-row: 1 / 1; z-index: 0; } .right_bg { display: subgrid; background-color: #ecf0f1; grid-column: 2 / 2; grid_row: 1 / 1; z-index: 0; } .text { font-family: Raleway; font-size: large; text-align: center; } <div class="container"> <!--everything on the page--> <div class="left_bg"> <!--left background color of the page--> <div class="text"> <!--left side text content--> <p>Review my stuff</p> </div> </div> <div class="right_bg"> <!--right background color of the page--> <div class="text"> <!--right side text content--> <p>Hire me!</p> </div> </div> </div>

您可以使用flexbox将文本居中。顺便说一下，不需要额外的容器，因为文本被认为是匿名的伸缩项。

来自flexbox规格:

伸缩容器的每个流内子元素都成为伸缩项，而直接包含在伸缩容器内的每个连续文本运行都包装在匿名伸缩项中。然而，只包含空格(即可以受空格属性影响的字符)的匿名伸缩项不会被呈现(就像它是display:none一样)。

因此，只需将网格项设置为伸缩容器(display: flex)，并添加align-items: center和justify-content: center以垂直和水平居中。

还进行了HTML和CSS的优化:

html, body { margin: 0; padding: 0; } .container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100vh; font-family: Raleway; font-size: large; } .left_bg, .right_bg { display: flex; align-items: center; justify-content: center; } .left_bg { background-color: #3498db; } .right_bg { background-color: #ecf0f1; } <div class="container"> <div class="left_bg">Review my stuff</div> <div class="right_bg">Hire me!</div> </div>

CSS位置项简写属性分别设置align-items和justification -items属性。如果没有设置第二个值，也会使用第一个值。

.parent {
  display: grid;
  place-items: center;
}

将父节点设为网格，并将justify-content: center;align-content:居中;

.parent { 身高:100 px; 宽度:100 px; 边框:1px纯黑色; 显示:网格; justify-content:中心; align-content:中心; ｝ .child { 高度:20 px; 宽度:20 px; 背景颜色:红色; ｝ < div class = "父" > < div class = "孩子" >子< / div > < / div >

这招对我很管用:

.d-grid { 显示:网格; Grid-template-columns: repeat(3,1fr); Border-top: 1px纯黑色; Border-left: 1px纯黑色; ｝ .d-grid div { 高度:50 px; 显示:flex; Border-bottom: 1px纯黑色; 右边框:1px纯黑色; 对齐项目:中心; justify-content:中心; ｝ < div class = " d网格”> < div >文本1 < / div > < div >文本2 < / div > 文本< div > 3 < / div > < div >文本4 < / div > < div >文本5 < / div > < div >文本6 < / div > < / div >