HTML CSS：网格容器在垂直中间对齐图标[重复]

Question

如何将这些项目在方框中间对齐？我尝试了所有垂直对齐中间，对齐内容，flex center，文本对齐

尽量避免使用下面答案建议中的 div，除非需要，还有其他方法吗？

.material-icons
{
   align-items: center;
   justify-content: center;
   text-align:center;
   vertical-align: middle;
   border-color:black;
   border-width:1px;
   border-style:solid;

}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<div class="grid-container" id="gridid1556351f5ece4ee3a7dce6962be48e39" style="  display: grid;
                    grid-template-columns: repeat(1, 250px);
                    grid-template-rows: repeat(2, 250px);
                    grid-gap: 1px;
                    padding: 0px;
                    align-items: stretch;
                    position: relative; ">
<i class="material-icons" style="font-size:48px;">notifications</i>
  <i class="material-icons" style="font-size:48px;">delete</i>

Answer 1

您可以使用此选择器.grid-container i，并使用 Flexbox 将图标垂直和水平居中：

---

.grid-container {
    display: grid;
    grid-template-columns: repeat(1, 250px);
    grid-template-rows: repeat(2, 250px);
    grid-gap: 1px;
    padding: 0px;
    align-items: stretch;
    position: relative; 
}


.grid-container i {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid black;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<div class="grid-container" id="gridid1556351f5ece4ee3a7dce6962be48e39">
    <i class="material-icons" style="font-size:48px;">notifications</i>
    <i class="material-icons" style="font-size:48px;">delete</i>
</div>

Answer 2

为了使用网格使其工作，我将<i> 包装在<p> 元素中，<p> 得到justify-self: center; align-self: center;

.grid-container {
  display: grid;
  grid-template-columns: repeat(1, 250px);
  grid-template-rows: repeat(2, 250px);
  grid-gap: 1px;
  padding: 0px;
  position: relative;
}
p {
  justify-self: center;
  align-self: center;
}

.material-icons {
  border-color: black;
  border-width: 1px;
  border-style: solid;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<div class="grid-container" id="gridid1556351f5ece4ee3a7dce6962be48e39">
  <p><i class="material-icons" style="font-size:48px;">notifications</i></p>
  <p><i class="material-icons" style="font-size:48px;">delete</i></p>
  
</div>

Answer 3

通过添加display:flex 属性将.material-icons 类设为弹性容器。您可能需要增加此样式的 css 优先级以覆盖默认显示样式.material-icons

.grid-container > .material-icons{
display:flex;
}