一宽堆、使用flex實(shí)現(xiàn)垂直居中
利用css flex實(shí)現(xiàn)垂直居中瓦哎。flex可能不是實(shí)現(xiàn)垂直居中最好的選擇，因?yàn)镮E8,9并不支持它陶珠。
現(xiàn)在挟裂，為了用flex實(shí)現(xiàn)垂直居中，我們首先要?jiǎng)?chuàng)建一個(gè)包裹著圖片的div元素揍诽，然后給它定義一些基礎(chǔ)屬性诀蓉。
以下圖片img寬度為（設(shè)置為）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;}
解釋?zhuān)?br>
1渠啤、為了用flex實(shí)現(xiàn)垂直居中狐肢，我們首先要?jiǎng)?chuàng)建一個(gè)包裹著圖片的div元素，然后給它定義一些基礎(chǔ)屬性沥曹。
2份名、div元素的display屬性設(shè)置為flex。
3妓美、div添加另外一條屬性align-items: center;
二僵腺、利用Display: table;實(shí)現(xiàn)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}
解釋?zhuān)?br>
1、首先我們先要?jiǎng)?chuàng)建一個(gè)div元素以及另外一個(gè)包含圖片的div元素壶栋，然后我們開(kāi)始設(shè)置它的樣式辰如。
2、給img父元素設(shè)置display屬性為table
3贵试、把包裹圖片的那個(gè)div元素的display屬性設(shè)置為table-cell
4琉兜、為了實(shí)現(xiàn)垂直居中，我們現(xiàn)在要做的就是給包裹圖片的div元素設(shè)置vertical-align: middle;屬性
注意：如果你也想實(shí)現(xiàn)水平居中毙玻，你可以給最外層的div元素添加text-align: center屬性呕童，注意不是id=”img”的div
三、用絕對(duì)定位實(shí)現(xiàn)垂直居中（推薦-兼容性好）
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;}
解釋?zhuān)?br>
1淆珊、一張包裹在div中的img圖片，我們給不光給圖片以及div元素定義了尺寸奸汇，還給div元素定義了#fff的背景色(背景顏色可以根據(jù)需求設(shè)置)施符。
2、給img的父元素添加相對(duì)定位屬性（position: relative）擂找，同時(shí)戳吝，要給子元素也就是圖片img元素添加絕對(duì)定位屬性（position: absolute）。
3贯涎、將圖片元素的top屬性設(shè)置為50%听哭。
4、現(xiàn)在我們需要給img元素設(shè)置一個(gè)負(fù)的margin-top值塘雳，這個(gè)值為你想要實(shí)現(xiàn)垂直居中的元素高度的一半陆盘，*如果不確定元素的高度，可以不使用margin-top败明，而是使用transform:translateY(-50%);屬性隘马。
記住：如果你想要同時(shí)實(shí)現(xiàn)水平居中妻顶，那么你可以用實(shí)現(xiàn)垂直居中的一樣的技巧來(lái)實(shí)現(xiàn)酸员。
