css - CSS Grid 在网格区域中居中图像

问题描述

我有以下 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;}

标签： cssalignmentcss-grid

快速回答：使用margin: auto

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

详细解答：在 CSS Grid 中居中

css - CSS Grid 在网格区域中居中图像

问题描述

解决方案

推荐阅读