圖片居中的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;
            }
        }
    }
}