css3中讓影像居中可以使用哪個元素

css3中讓圖片居中可以使用【align-items:center】元素和【justify-content:center】元素。 align-items屬性定義flex子項在flex容器的目前行的縱軸方向上的對齊方式。

方法：

採用align-items:center(垂直居中)和justify-content:center(水平居中)這2個屬性。

align-items屬性定義flex子項在flex容器的目前行的縱軸方向上的對齊方式。

（學習影片推薦：css影片教學）

html：

<div class="container container-2">
    <img src="http://scrm-staging-cdn.oss-cn-hangzhou.aliyuncs.com/avatar/wechat/aHR0cDovL3d4LnFsb2dvLmNuL21tb3Blbi9YeFQ5VGlhSjFpYmYzdFk4b2hENHFpYmxkTUdEbk1NRXFuZVdlZk5pY2lic1h1MjFZdHAxV1o2bGsxUTFVeE9vSzY4QVJEa0tRZ05OYWgzeTFzY01YUUp3clBRLzA=">
</div>

css：

.container-2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex-box;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    text-align: center;
}

也可以利用絕對定位Margin來實現。

圖片相對外層浮動，然後margin: auto

HTML：

<h3 class="demo">绝对定位+Margin</h3>
<div class="container container-1">
    <img src="http://scrm-staging-cdn.oss-cn-hangzhou.aliyuncs.com/avatar/wechat/aHR0cDovL3d4LnFsb2dvLmNuL21tb3Blbi9YeFQ5VGlhSjFpYmYzdFk4b2hENHFpYmxkTUdEbk1NRXFuZVdlZk5pY2lic1h1MjFZdHAxV1o2bGsxUTFVeE9vSzY4QVJEa0tRZ05OYWgzeTFzY01YUUp3clBRLzA=">
</div>

CSS：

.container-1 {position: relative;}

.container-1 img{position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;}

相關推薦：CSS教學

以上是css3中讓影像居中可以使用哪個元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！