方法：1、用“父元素{display:flex}”語(yǔ)句設(shè)置父元素為彈性布局；2、用“父元素{align-items:center}”語(yǔ)句使子元素垂直居中；3、用“父元素{justify-content:center}”語(yǔ)句使子元素水平居中。

創(chuàng)新互聯(lián)專(zhuān)業(yè)為企業(yè)提供晉江網(wǎng)站建設(shè)、晉江做網(wǎng)站、晉江網(wǎng)站設(shè)計(jì)、晉江網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、晉江企業(yè)網(wǎng)站模板建站服務(wù)，十載晉江做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css3怎樣設(shè)置子元素居中

我們可以通過(guò)display:flex樣式將父元素元素設(shè)置為彈性布局，用來(lái)為父元素提供的靈活性。

align-items 屬性定義flex子項(xiàng)在flex容器的當(dāng)前行的側(cè)軸（縱軸）方向上的對(duì)齊方式。

justify-content 用于設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對(duì)齊方式。

示例如下：

輸出結(jié)果：

（學(xué)習(xí)視頻分享：css視頻教程）