CSS网格在网格区域中居中放置图像_Css_Alignment_Css Grid

CSS网格在网格区域中居中放置图像

css

CSS网格在网格区域中居中放置图像,css,alignment,css-grid,Css,Alignment,Css Grid,我有下面的CSS，它有五个网格区域（一个区域被四个其他区域包围）。每个网格区域为200x200像素文本在其网格区域中居中对齐，但图像（在.area1中）保持在左上角（图像为150x150，因此应该有居中的范围）有人知道我做错了什么吗下面是CSS和HTML <!doctype html> <html> <head> <meta charset="utf-8"> <title>Grid Area Test</title>

我有下面的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>

快速回答：使用

margin:auto

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

详细答案：

谢谢-从“其他”答案看不清楚（但我承认它就在那里的某个地方），但上面的回答有效。非常感谢。

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