色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

圖片居中css3

阮建安2年前8瀏覽0評論

CSS3為網頁設計中的圖片居中提供了更多的方式。

下面列舉幾種常用的圖片居中方法:

/* 水平垂直居中方法1 */
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
/* 水平垂直居中方法2 */
.container {
display: flex;
justify-content: center;
align-items: center;
}
/* 水平居中方法1 */
.img {
display: block;
margin: 0 auto;
}
/* 水平居中方法2 */
.img {
position: absolute;
left: 50%;
transform: translateX(-50%);
}

以上代碼中,方法1是使用了絕對定位,top和left屬性將圖片的左上角移動到了頁面中心點,transform屬性則通過translate函數平移了圖片本身的一半寬度和高度,達到水平垂直居中的效果。

方法2是利用了flex布局,將容器內的內容水平和垂直居中。

方法3和方法4是僅僅水平居中的方法。方法3將圖片設置為塊級元素,使用margin屬性實現水平居中,方法4則是使用絕對定位,將圖片的左邊框線與容器的中心點重合,再利用transform函數將圖片本身的一半寬度平移回左側,實現水平居中的效果。