在Safari对齐中显示Flex

Posted 2021-03-27

我有div块，里面有一个子元素：

.mark__btn {
  width: 19px;
  height: 19px;
  border-radius: 2px;
  cursor: pointer;
  text-align: center;
  opacity: 0.8;
  position: relative;
  margin-right: 3px;
  color: #000;
  display: flex;
  align-items: center;
  align-content: center;
  flex-direction: column;
  justify-content: center;
  align-self: center;
}

.mark__btn span {
  font-size: 14px;
}

<div class="mark__btn">
  <span>+</span>
</div>

所以，我尝试通过水平和垂直对齐中心元素span，它适用于Chrome，但不适用于Safari

答案

您需要为Safari和其他浏览器使用前缀才能使用display flex

display: -webkit-box; 
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;  // for safari
display: flex;