Question

我有以下CSS，它具有五个网格区域（一个区域被四个其他区域包围）。每个网格面积为200x200像素。

文本在其网格区域中居中对齐，但是图像（.area1中）保持在左上方（图像为150x150，因此应该有居中的范围）。

有人知道我在做什么错吗？

下面是CSS和HTML。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Grid Area Test</title>
<link rel="stylesheet" type="text/css" href="style.css">    
</head>

<body>

    <img class="area1" src="https://source.unsplash.com/150x150">
    <p class="area2">Area 2</p>
    <p class="area3">Area 3</p>
    <p class="area4">Area 4</p>
    <p class="area5">Area 5</p>

</body>
</html>

* {
    box-sizing: border-box;
    margin: 0;
}

body {
    background: #9A9696;
}

body {
    display: grid;
    grid-template-columns: repeat(6, 100px);
    grid-template-rows: repeat(6, 100px);
    grid-template-areas: 
        "area1 area1 ..... ..... area2 area2"
        "area1 area1 ..... ..... area2 area2"
        "..... ..... area3 area3 ..... ....."
        "..... ..... area3 area3 ..... ....."
        "area4 area4 ..... ..... area5 area5"
        "area4 area4 ..... ..... area5 area5";
    justify-content: center;
}

.area1, .area2, .area3, .area4, .area5 {
    background: #DE6449;
    display: grid;
    align-items: center;
    justify-content: center;
}

.area1 {grid-area: area1;}
.area2 {grid-area: area2;}
.area3 {grid-area: area3;}
.area4 {grid-area: area4;}
.area5 {grid-area: area5;}
.area6 {grid-area: area6;}

Answer 1

快速解答：使用margin: auto

.area1 {
  grid-area: area1;
  margin: auto;
}

详细答案：Centering in CSS Grid

网格区域中CSS网格居中图像

1 个答案: