前端開發(fā)之CSS圖片水平、垂直居中顯示

過前端開發(fā)的朋友都知道，要使文字在一個(gè)div容器垂直居中顯示是很簡單的事，但是如果是要讓一張圖片在div容器中垂直顯示那就有點(diǎn)傷腦筋了，因?yàn)閳D片是個(gè)置換元素，有些特殊的特性，對(duì)于前端開發(fā)的大牛來說還好，解決方法有很多，比如什么利用js啊之類的，但是這些對(duì)于初學(xué)者來說就有些難度了，今天小編就把自己平時(shí)在項(xiàng)目中用的方法分享給大家，給大家一個(gè)參考。

其實(shí)小編用的方法也不是什么很高端的技術(shù)，算是最low的方法吧，但是很實(shí)用，能兼容各種瀏覽器，為了演示，小編直接從某寶商家店鋪里拿了一張商品圖來做演示，因?yàn)樯唐穲D都是高清無碼的，且還很大，所以我們?cè)贑SS中把圖片的高度設(shè)置為200px，div容器的高度為300px，完整的代碼如下：

最終的運(yùn)行效果如下圖：

可以看到，這個(gè)圖片在div中水平、垂直都是在正中間，是不是很完美。這個(gè)原理也很簡單，就是在div容器中加了個(gè) <i> 標(biāo)簽并把它的 display 屬性設(shè)置為 inline-block（行內(nèi)塊元素），讓它去撐開div容器的高度，再把圖片的 vertical-align 屬性設(shè)置為 middle 就可以垂直居中了，當(dāng)然這只是個(gè)演示，大家在實(shí)際的項(xiàng)目中可以利用 max-width、min-width、max-height、min-height 等屬性讓圖片根據(jù)需要自適應(yīng)，以達(dá)到想要的效果。

當(dāng)然解決方法還有很多種，具體用什么方法需根據(jù)自身頁面布局去權(quán)衡，總之沒有最好的，只有最適合的，如果你有更好的方法也可以告訴小編哦，一起交流方法，共同進(jìn)步。

直居中-父元素高度確定的單行文本

父元素高度確定的單行文本的豎直居中的方法是通過設(shè)置父元素的height和line-height高度一致來實(shí)現(xiàn)的。如下代碼：

<div class="container">
hi,imooc!
</div>

css代碼：

<style>
    .container{
    height:100px;
    line-height:100px; /* 僅能用于單行文本 */
    background:#999;
}
</style>

垂直居中-圖片以及行內(nèi)塊元素

<div class="container">
<img src="imgegs/icon.png" />
</div>

css代碼：

<style>
.container{
    height:100px;
    background:#999;
}
.container img{
    vertical-align:middle;
}
</style>

垂直居中-父元素高度確定的多行文本(方法一)

父元素高度確定的多行文本、圖片、塊狀元素的豎直居中的方法有兩種：

方法一：使用插入table(包括tbody、tr、td)標(biāo)簽, 同時(shí)設(shè)置vertical-align：middle。

說到豎直居中,css中有一個(gè)用于豎直居中的屬性vertical-align,但這個(gè)樣式只有在父元素為td 或th時(shí),才會(huì)生效。所以又要插入table標(biāo)簽了。

下面看一下例子：

html代碼：

<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>

css代碼：

table td{height:500px;background:#ccc}

因?yàn)閠d標(biāo)簽?zāi)J(rèn)情況下就默認(rèn)設(shè)置了vertical-align為middle, 所以我們不需要顯式地設(shè)置了。

垂直居中-父元素高度確定的多行文本(方法二)

在chrome、firefox及IE8以上的瀏覽器下可以設(shè)置塊級(jí)元素的display為table-cell, 激活vertical-align屬性, 但注意IE6、7并不支持這個(gè)樣式。

html代碼：

<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>

css代碼：

<style>
.container{
    height:300px;
    background:#ccc;
    display:table-cell; /*IE8以上及Chrome、Firefox*/
    vertical-align:middle; /*IE8以上及Chrome、Firefox*/
}
</style>

這種方法的好處是不用添加多余的無意義的標(biāo)簽,但缺點(diǎn)也很明顯,它的兼容性不是很好,不兼容 IE6、7。

垂直居中--方法三

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
div{
    width: 400px;
    height: 300px;
    background-color: orange;
}
/*
* 思路一：left:50%;top:50%;margin-left: -200px;margin-top: -150px;
* 思路二：left:0;top:0;right:0;bottom:0;margin:auto;
* */

div{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%); /* 平移 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>

實(shí)例1:將內(nèi)層div的文本垂直居中

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>父元素高度確定的多行文本</title>
<style>
.container{
    height:300px;
    background:#ccc;
    display:table-cell; /*IE8以上及Chrome、Firefox*/
    vertical-align:middle; /*IE8以上及Chrome、Firefox*/
}
</style>
</head>
<body>
<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>
<!--下面是代碼任務(wù)區(qū)-->
</body>
</html>

實(shí)例2：將內(nèi)層垂直居中、外層水平居中

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
<style type="text/css">
#content{
    width:300px;
    height:300px;
    border:#000 solid 1px;
    margin:auto;
    display:table;
}
#wenzi{
    border:#F00 solid 1px;
    text-align:center;
    display:table-cell;
    vertical-align: middle;
}
</style>
</head>
<body>
<div id="content">
<div id="wenzi">
鋤禾日當(dāng)午，<br>
汗滴禾下土。<br>
誰知盤中餐，<br>
粒粒皆辛苦。<br>
</div>
</div>
</body>
</html>

實(shí)例3: 使用絕對(duì)定位垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
div{
    width: 220px;
    height: 280px;
    background: url("img/王思聰.jpg");
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -110px;
    margin-top: -140px;
}
</style>
</head>
<body>
<!--
行內(nèi)元素(文本)->水平垂直居中
text-align: center;
line-height: height;
-->
<!--
塊元素->水平垂直居中
margin: 0 auto;
-->
<div></div>
</body>
</html>

實(shí)例4: 使用絕對(duì)定位垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
div{
    width: 600px;
    height: 200px;
    padding: 10px 20px;
    border: 1px solid #000;
    border-radius: 5px;
    /* 下面這種寫法也可以讓一個(gè)盒子居中 */
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
</style>
</head>
<body>
<div>您確定刪除：重慶萬州公交墜江事件結(jié)果公布后，司乘糾紛和公交駕駛安全問題成為人們熱議的焦點(diǎn)，如何預(yù)防和避免惡性結(jié)果的發(fā)生，才是問題的關(guān)鍵。“鼓勵(lì)市民舉報(bào)，并對(duì)勇于制止干擾公交車正常行駛違法行為的公民予以獎(jiǎng)勵(lì)。”昨日下午，西安市公安局公共交通分局召開媒體通氣會(huì)，通報(bào)西安相關(guān)安全舉措。這條消息嗎</div>
</body>
</html>

絕對(duì)定位(固定定位)之后, 所有標(biāo)準(zhǔn)流的規(guī)則, 都不適用了。所以margin:0 auto; 失效。

解決辦法：left:50%; margin-left:負(fù)的寬度的一半。（三句話）

div{
width: 600px;
height: 60px;
position: absolute;  /* → 第一句  */
left: 50%;   //   /*  → 第二句   */ 
top: 0;
margin-left: -300px;    /*→ 第三句。寬度的一半*/
}

實(shí)例4：使用絕對(duì)定位和margin:auto垂直居中

容導(dǎo)讀

當(dāng)父div的行高等于自身高度時(shí)，內(nèi)部的行內(nèi)元素會(huì)上下居中顯示。行內(nèi)塊沒有固定高度時(shí)也會(huì)上下居中顯示。所以需要對(duì)父div的 line-height 進(jìn)行調(diào)整。利用定位屬性（top、left、right、bottom）百分比的模式。若為100%，則代表偏移的長度為父div的高度（寬度）的100%。定位屬性top和bottom（或是left和right）值分別設(shè)置為0，但子div有固定高度（寬度），并不能達(dá)到上下（左右）間距為0，此時(shí)給子div設(shè)置 margin:auto 會(huì)使它居中顯示。

轉(zhuǎn)載自喜歡JS的無名小站

例如一個(gè)父div(w:100%;h:400px)中有一個(gè)子div(w:100px;100px;)。讓其上下左右居中。

方法一（varticle-align）

理念

利用表格單元格的居中屬性。

步驟

父div外層配置一個(gè)div，同時(shí)設(shè)置為表格元素 (display: table)，寬度為100%
父div配置為表格單元格元素 (display: table-cell)
父div配置居中屬性（vertical-align: middle），使子div上下居中
子div通過margin配置左右居中（margin-left:auto; margin-right:auto）

例子

<style>
 * {margin: 0; padding: 0; box-sizing: border-box;}
 .table {display: table; width: 100%;}
 .father {display: table-cell; vertical-align: middle;}
 .son {margin: auto;}
</style>
<body>
 <div class="table" >
 <div class="father" style="width: 100%; height: 400px; border: 1px solid rebeccapurple;">
 <div class="son" style="width: 100px; height: 100px;background: palegreen;"></div>
 </div>
 </div>
</body>

注：

表格單元格比較特殊，如果只有一個(gè)單元格時(shí)，它的寬度默認(rèn)會(huì)占父級(jí)（table|tr）寬度的100%;
table默認(rèn)寬度不會(huì)撐開，需要手動(dòng)配置width:100%；

方法二(line-height)

理念

當(dāng)父div的行高等于自身高度時(shí)，內(nèi)部的行內(nèi)元素會(huì)上下居中顯示。行內(nèi)塊沒有固定高度時(shí)也會(huì)上下居中顯示。通過文本居中屬性text-align:center,可以使內(nèi)部行內(nèi)元素或行內(nèi)塊元素左右居中顯示。

步驟

子div設(shè)定為行內(nèi)塊元素(display:inline-block)；
父div設(shè)置行高(line-height)使子div上下居中
父div設(shè)置文本居中(text-align:center)使子div左右居中。

<style>
 * {margin: 0; padding: 0; box-sizing: border-box;}
 .father {line-height: 500px; text-align: center; font-size: 0;}
 .son { display: inline-block;
 /* display: inline-flex;
 display: inline-grid;
 display: inline-table; */
 }
</style>
<body>
 <div class="father" style="width: 100%; height: 400px; border: 1px solid rebeccapurple;">
 <div class="son" style="width: 100px; height: 100px;background: palegreen;"></div>
 </div>
</body>

注：行高如果設(shè)置為當(dāng)前父div的高度(400px)的話，有固定高度的子div并不會(huì)居中顯示的，問題出在瀏覽器默認(rèn)將其當(dāng)做文本居中的，即把它當(dāng)做了一段文本（chrome默認(rèn)font-size:16px;hight:21px）進(jìn)行居中，沒把它當(dāng)做高度100px進(jìn)行居中。所以需要對(duì)父div的line-height進(jìn)行調(diào)整。以font-size:0（對(duì)應(yīng)的字體高度為0）為例子，則需要line-height增加一個(gè)子div的高度（400px + 100px;）。

方法三（定位）

理念

利用定位屬性（top、left、right、bottom）百分比的模式。若為100%，則代表偏移的長度為父div的高度（寬度）的100%。

步驟

父div標(biāo)記下定位（position:relative|absolute|fixed）;子div絕對(duì)定位（position:absolute）
子div上下居中：top:50%;margin-top:-h/2; 或是 bottom:50%;margin-bottom:-h/2;；
子div左右居中: left:50%;margin-left:-w/2 或是 right:50%;margin-right:-w/2；

例子

<style>
 * {margin: 0; padding: 0; box-sizing: border-box;}
 .father {position: relative;}
 .son {position: absolute;bottom:50%;margin-bottom: -50px;left: 50%;margin-left: -50px;
 }
</style>
<body>
 <div class="father" style="width: 100%; height: 400px; border: 1px solid rebeccapurple;">
 <div class="son" style="width: 100px; height: 100px;background: palegreen;"></div>
 </div>
</body>

方法四（定位）

理念：

定位屬性top和bottom（或是left和right）值分別設(shè)置為0，但子div有固定高度（寬度），并不能達(dá)到上下（左右）間距為0，此時(shí)給子div設(shè)置margin:auto會(huì)使它居中顯示。

步驟：

父div標(biāo)記下定位（position:relative|absolute|fixed|sticky）;子div絕對(duì)定位（position:absolute）
子div上下居中：top:0;bottom:0;margin-top:auto;margin-bottom:auto
子div左右居中：left:0;right:0;margin-left:auto;margin-right:auto

例子

<style>
 * {margin: 0; padding: 0; box-sizing: border-box;}
 .father {position: relative;}
 .son {position: absolute; top: 0; bottom:0; left: 0; right: 0; margin: auto}
</style>
<body>
 <div class="father" style="width: 100%; height: 400px; border: 1px solid rebeccapurple;">
 <div class="son" style="width: 100px; height: 100px;background: palegreen;"></div>
 </div>
</body>

方法五（flex）

理念

彈性盒子，自帶的一個(gè)居中功能

例子

<style>
 * {margin: 0; padding: 0; box-sizing: border-box;}
 .father {display: flex; align-items: center}
 .son {margin: auto}
</style>
<body>
 <div class="father" style="width: 100%; height: 400px; border: 1px solid rebeccapurple;">
 <div class="son" style="width: 100px; height: 100px;background: palegreen;"></div>
 </div>
</body>

flex兼容性，以及存在的已知問題

結(jié)尾

方法二和方法三兼容性要比其它好些

參考資料

Can I use
css-vertical-center-solution
CSS實(shí)現(xiàn)垂直居中的5種方法--前端觀察

在線咨詢

上一篇：Autodesk AutoCAD 2004 – 2019 全套簡體中文正式版及破解注冊(cè)機(jī)
下一篇：HTML5之新增表單屬性和屬性值

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

前端開發(fā)之CSS圖片水平、垂直居中顯示

容導(dǎo)讀

方法一（varticle-align）

理念

步驟

例子

方法二(line-height)

理念

步驟

方法三（定位）

理念

步驟

例子

方法四（定位）

理念：

步驟：

例子

方法五（flex）

理念

例子

結(jié)尾

參考資料

您的項(xiàng)目需求