图片居中的flex实现

文本居中

text-align:center;

如果是图片放在div中，就没办法了。用flex可以很简单实现。

display: flex;
justify-content: center; /* 图片居中 */

下面是案例：



html

<!-- 优势 -->
<div class="strength">
    <div class="strength-title">
        创新优势
    </div>
    <div class="strength-container">
        <div class="strength-item">
            <div class="strength-item-icon">
                <img src="/Index/Index/image/innovate/shenduhezuo.png" alt="">
            </div>
            <div class="strength-item-title">
                产学研深度合作
            </div>
            <div class="strength-item-content">
                力邀世界一流大学科学家加盟，带领研究团队参与企业级创新方案规划。
            </div>
        </div>
        <div class="strength-item">
            <div class="strength-item-icon">
                <img src="/Index/Index/image/innovate/xianjinlinian.png" alt="">
            </div>
            <div class="strength-item-title">
                先进的实施理念
            </div>
            <div class="strength-item-content">
                以产品思维取代项目思维， 将产品化的理念贯彻到创新的每一个环节，每一个人。
            </div>
        </div>
        <div class="strength-item">
            <div class="strength-item-icon">
                <img src="/Index/Index/image/innovate/genji.png" alt="">
            </div>
            <div class="strength-item-title">
                牢靠的根基
            </div>
            <div class="strength-item-content">
                先进的云计算技术平台，支撑起以宝尊多年品牌电商运营经验培育的电商云生态平台。
            </div>
        </div>
        <div class="strength-item">
            <div class="strength-item-icon">
                <img src="/Index/Index/image/innovate/biaozhun.png" alt="">
            </div>
            <div class="strength-item-title">
                标准化能力
            </div>
            <div class="strength-item-content">
                通过标准化的数据，打造标准化的产品，使宝尊具备提供标准化科技服务的能力。
            </div>
        </div>
    </div>
</div>

css

.strength {
    height: 518px;
    background-color: #F6F8FC;
    overflow: hidden;
    .strength-title {
        margin-top:100px;
        font-size: 30px;
        font-weight: bold;
        text-align: center;
    }
    .strength-container {
        width: 925px;
        margin:0 auto;
        margin-top:63px;
        display: flex;
        justify-content: space-between;
        .strength-item {
            width: 208px;
            height: 208px;
            //border: 1px solid red;
            .strength-item-icon {
                display: flex;
                justify-content: center; /* 图片居中 */
                height: 56px;
            }
            .strength-item-title {
                margin-top: 30px;
                font-size: 20px;
                font-weight: bold;
                text-align: center;
            }
            .strength-item-content {
                margin-top: 23px;
                font-size: 16px;
                color: #222222;
                text-align: center;
            }
        }
    }
}