谷歌浏览器问题与align-items：中心

Question

我正在为flex align-items：中心而苦苦挣扎。请参阅参考图像。我尝试应用-webkit-align-items，但现在这是我在MDN上阅读时所有浏览器的标准属性。在整个开发生涯之前，这从未发生过。谢谢

Mozzila-firefox：

Chrome + Safari

div.home {
  background-color: #F1F1F1;
  display: flex;
  height: 53px;
  width: 53px;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  /*-webkit-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;*/
  margin-right: 25px;
}

.element-2 {
  box-shadow: 
    5px 5px 10px 0 rgb(188, 188, 188, 0.45),
    -5px -5px 12px 0 rgb(255, 255, 255, 100);
}

.fa-bell {
  color: #5281C2;
  font-size: 23px !important;
}

<div class="home element-2">
    <i class="fa fa-bell"></i>
</div>
<script src="https://kit.fontawesome.com/90e4bc8c6b.js" crossorigin="anonymous"></script>

Answer 1

尝试使用一些https://meyerweb.com/eric/tools/css/reset/

这样的reset.css来重置CSS。