css3中讓影像居中可以使用哪個元素-css教學-PHP中文網

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

王林

發布： 2020-11-12 09:12:40

原創

1511 人瀏覽過

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

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

方法：

採用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;}

登入後複製