css圖片垂直居中 讓html img圖片垂直居中的三種方法
本教程為thinkcss教大家三種讓img元素圖片在盒子內垂直居中的方法教程,根據程式碼與文章教程理解掌握並加以使用。
一、使用flex實現垂直居中
利用css flex實現垂直居中。flex可能不是實現垂直居中最好的選擇,因為IE8,9並不支援它。
現在,為了用flex實現垂直居中,我們首先要建立一個包裹著圖片的div元素,然後給它定義一些基礎屬性。
以下圖片img寬度為(設定為)100px,高度為100px。
HTML程式碼部分:
<div class="flexbox">
<img src="1.jpg" alt="">
</div>
CSS程式碼部分:
body{ background:#999}
.flexbox{width: 300px;height: 250px;background:#fff;display: flex;align-items: center}
.flexbox img{width: 100px;height: 100px;align-items: center;}
效果:
瀏覽器執行效果:實現圖片垂直居中佈局
解釋:
1、為了用flex實現垂直居中,我們首先要建立一個包裹著圖片的div元素,然後給它定義一些基礎屬性。
2、div元素的display屬性設定為flex。
3、div新增另外一條屬性align-items: center;
二、利用Display: table;實現img圖片垂直居中
html程式碼:
<div class="tablebox">
<div id="imgbox">
<img src="1.jpg" alt="">
</div>
</div>
CSS程式碼:
.tablebox{width: 300px;height: 250px;background: #fff;display: table}
#imgbox{display: table-cell;vertical-align: middle;}
#imgbox img{width: 100px}
解釋:
1、首先我們先要建立一個div元素以及另外一個包含圖片的div元素,然後我們開始設定它的樣式。
2、給img父元素設定display屬性為table
3、把包裹圖片的那個div元素的display屬性設定為table-cell
4、為了實現垂直居中,我們現在要做的就是給包裹圖片的div元素設定vertical-align: middle;屬性
注意:如果你也想實現水平居中,你可以給最外層的div元素新增text-align: center屬性,注意不是id=”img”的div
三、用絕對定位實現垂直居中(推薦-相容性好)
HTML程式碼:
<div class="posdiv">
<img src="1.jpg" alt="">
</div>
CSS程式碼:
body{background: #ccc;}
.posdiv{width: 300px;height: 250px;background: #fff;position: relative; margin:0 auto}
.posdiv img{width: 100px;position: absolute;top: 50%;margin-top: -50px;}
解釋:
1、一張包裹在div中的img圖片,我們給不光給圖片以及div元素定義了尺寸,還給div元素定義了#fff的背景色(背景顏色可以根據需求設定)。
2、給img的父元素新增相對定位屬性(position: relative),同時,要給子元素也就是圖片img元素新增絕對定位屬性(position: absolute)。
3、將圖片元素的top屬性設定為50%。
4、現在我們需要給img元素設定一個負的margin-top值,這個值為你想要實現垂直居中的元素高度的一半,*如果不確定元素的高度,可以不使用margin-top,而是使用transform:translateY(-50%);屬性。
記住:如果你想要同時實現水平居中,那麼你可以用實現垂直居中的一樣的技巧來實現。
通過以上三種方法讓img圖片垂直居中,希望大家能掌握佈局方法與原理。