html圖片如何垂直居中

⑴ 圖片水平垂直居中的四種方法

第一種：相對定位+margin:auto

<div class="Pic"><img src="images/img.png" alt="」 /></div>

.Pic { position:relative; }

.Pic img { position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; }

第二種：利用flexbox裡面的垂直居中屬性( align-items:center) 和水平居中屬性(justify-content:center)

<div class="Pic」><img src="images/img.png" alt="" /></div>

.Pic { display:flex; align-items:center; justify-content: center; /*新版本寫法*/ text-align:center; }

第三種：利用dispay:table-cell + 圖片vertical-align:middle

<div class="Pic"><span class="icenter"><img src="images/img.png" alt="" /></span></div>

.Pic .icenter { display:table-cell; vertical-align:middle; text-align:center; width:60px; height:60px; }

.Pic img { vertical-align:middle; display:inline-block; }

第四種：增加一個空白標簽

<div class="Pic"><img src="images/img.png" alt="" /><i class="iblock"></i></div>

.Pic { text-align:center; }

.Pic img { vertical-align:middle; }

.Pic .iblock { display:inline-block; vertical-align:middle; height:100%; width:0; }

⑵ css html 如何將圖片img標簽 水平居中 垂直居中 和水平垂直居中

1、第一種css代碼如圖所示。display設置成table-cell，text-align為center，垂直居中設置vertical-align為middle。

⑶ 如何將html中圖片文字垂直居中

文字垂直居中：

• 設置標簽高度height，並且設置行高line-height值與height值一樣。

• 也可以給父標簽設置相對定位（position：relative），然後文字用一個行內標簽（如span）包裹，並且給span設置絕對定位。
  

div垂直居中：

• 可以使用margin或padding來控制。比如margin：70% 0；（上下70%，左右0）

如果滿意，望採納，謝謝！如果不懂，可隨時追問！