放置内容、对齐内容和对齐不起作用的项目

Question

如何集中网格容器？这是图片我已经试过其他类似问题的所有答案，但仍然不起作用。在将内容更改为放置内容之前，我使用了对齐内容和对齐项目。当我使用自动边距时，它在水平轴上工作。

main {
background-color: aliceblue;
height: 100vh;
}
.grid-container {
display: grid;
width: 80%;
grid-template-columns: repeat(3, 1fr);
place-content: center;
}
.grid-item-1 {
height: var(--height-grid-item);
padding: var(--padding-grid-item);
background-color: hsl(31, 77%, 52%);
position: relative;
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
}
.grid-item-2 {
height: var(--height-grid-item);
padding: var(--padding-grid-item);
background-color: hsl(184, 100%, 22%);
position: relative;
}
.grid-item-3 {
height: var(--height-grid-item);
padding: var(--padding-grid-item);
background-color: hsl(179, 100%, 13%);
position: relative;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
}

<div class="grid-container">
<div class="grid-item-1">
<img src="./sedans.png" alt="sedans">
<h2>SEDANS</h2>
<p>Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city or on your next road trip.
</p>
<button>Learn More</button>
</div>
<div class="grid-item-2">
<img src="./suvs.png" alt="suv">
<h2>SUVS</h2>
<p>Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation and off-road adventures.
</p>
<button>Learn More</button>
</div>
<div class="grid-item-3">
<img src="./luxury.png" alt="luxury">
<h2>LUXURY</h2>
<p>Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury rental and arrive in style.
</p>
<button>Learn More</button>
</div>
</div>

在此处输入图像描述

Answer 1

垂直居中：

你的网格容器没有占据整个屏幕的高度(你可以为这个元素添加height: 100vh(，这就是为什么属性place-content: center不能正常工作的原因。

水平居中：

您可以将margin: auto添加到您的网格容器中

main{
background-color: aliceblue;
height: 100vh;
}
.grid-container {
display: grid;
width: 80%;
grid-template-columns: repeat(3, 1fr);
place-content: center;
margin: auto;
height: 100vh
}
.grid-item-1 {
height: var(--height-grid-item);
padding: var(--padding-grid-item);
background-color: hsl(31, 77%, 52%);
position: relative;
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
}
.grid-item-2 {
height: var(--height-grid-item);
padding: var(--padding-grid-item);
background-color: hsl(184, 100%, 22%);
position: relative;
}
.grid-item-3 {
height: var(--height-grid-item);
padding: var(--padding-grid-item);
background-color: hsl(179, 100%, 13%);
position: relative;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
}

<div class="grid-container">
<div class="grid-item-1">
<img src="./sedans.png" alt="sedans">
<h2>SEDANS</h2>
<p>Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city or on your next road trip.
</p>
<button>Learn More</button>
</div>
<div class="grid-item-2">
<img src="./suvs.png" alt="suv">
<h2>SUVS</h2>
<p>Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation and off-road adventures.
</p>
<button>Learn More</button>
</div>
<div class="grid-item-3">
<img src="./luxury.png" alt="luxury">
<h2>LUXURY</h2>
<p>Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury rental and arrive in style.
</p>
<button>Learn More</button>
</div>
</div>