记录前端常用功能样式之文字图片上下左右居中等

1.文字上下左右居中样式：

    height: .56rem;
    text-align: center;
    font-size: .2rem;
    color: #999999;
    font-weight: 400;
    line-height: .3rem;
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    align-items: center;
    justify-content: center;
    flex-direction: column;

2.display各种兼容

    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;

3.文字和图片上下左右居中并且宽度跟随变化

CSS代码：    
     fit-content !important;
     -webkit-fit-content !important;
     -moz-fit-content !important;
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    font-size: .22rem;
    color: #008eff;
    align-items: center;
    justify-content: center;

HTML代码：
<div class="howuse">
     <p>大长刀</p>
     <img src="//ah.10086.cn/upfile/h5/images/flow/ws2.png" style=" .23rem;height: .21rem;margin-left: .1rem;">
</div>