我有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;