<分区>
<分区>
如何在方框中间对齐这些元素？我尝试了所有垂直居中对齐、对齐内容、 flex 居中、文本对齐
尝试避免使用下面的答案建议中的 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>最佳答案
你可以使用这个选择器，.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>关于HTML CSS : Grid Container Align Icons in Vertical Middle，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56982460/