谷歌图标不会对齐或浮动居中

Question

我试图添加一个中心对齐的谷歌图标作为一个div内的图形，在标题之上，我不能对齐或浮动中心。我只能左对齐或左右浮动，但不能居中。

图标左对齐截图

两个CSS代码都没有达到我的预期。

<div id="comps">
<div class="dark">
<i class="material-icons" style="font-size:48px;">cloud</i>
<h3>Competencies</h3>
.material-icons {
text-align: center;
}
.material-icons {
float: center;
}

Answer 1

.center {
display: flex;
justify-content: center;
}

<div id="comps">
<div class="dark">
<i class="center" style="font-size:48px;">cloud</i>
<h3 class="center" >Competencies</h3>