圖片垂直居中（2015-12-11更新）

時間 2019-11-09

標籤圖片垂直居中更新简体版

原文原文鏈接

#main{
  position:fixed;
  height:80%;
  width:100%;
  top:10%;
}
.c,.p{
  border:1px #000 solid;
  width:20%;
  height:80%;
  float:left;
  font-size:0;/*去掉字符間距*/
  text-align:center;
}
.c>img:first-child{
  height:100%;
  width:0
}
.p{
  height:500px;
  line-height:500px;
}
.c>img,.p>img{
  max-width:100%;
  max-height:100%;
  /*display:block;
  margin:0 auto;*/
  display:inline-block;
  vertical-align:middle;
}

<div id="main">
 <div class="c">
  <img />
  <img src="1.png"/>
 </div>
 <div class="c">
  <img />
  <img src="2.png"/>
 </div>
 <div class="p">
  <img src="3.png"/>
 </div>
 <div class="p">
  <img src="4.png"/>
 </div>
<div>

首先是水平居中的問題，這個問題比較好解決，這裏有兩種方法：css

對img元素使用display:block;margin:0 auto;html
在父元素上使用text-align:center，而且img元素設爲display:inline（默認），同時爲了去掉間距，能夠使用font-size:0;瀏覽器

而後是垂直居中的問題，這裏的解決方法要求父容器是固定的大小的（不隨子元素的變化而變化），即有設置height和width，例如設置：width:100%,height:80%；安全

分爲四種狀況：wordpress

1.container大小肯定、img大小肯定

對於這種狀況能夠直接設置margin或paddingspa

2.container大小不肯定，img大小肯定

對於這種狀況能夠使用定位的方法解決，父元素設爲position:relative；img元素設爲code

position:absolute;
left:50%;
top:50%;
margin-left:-(0.5width);
margin-top:-(0.5height);

3.container大小肯定，img大小不肯定

這種狀況見上面例子的p類元素，即便用文本居中的辦法即設置（父元素）height等於line-height和（img元素）vertical-align:middle，要注意的是img爲inline（或inline-block）類型。htm

2015-12-11更新：圖片

對於DOCTYPE 聲明不是<!DOCTYPE html>而是<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">字符串

的狀況，須要在p標籤裏添加一些文本，如：

.p:before {

    content: ".";

    visibility: hidden;

    font-size:1px;/*由於p元素指定了font-size:0;兼容ie*/

}

對於360安全瀏覽器極速模式，能夠指定content的內容爲空字符串，或者不指定font-size。

這時若是img的寬度爲100%的話，還須要設置img的margin爲 margin-left:-1px; 這個數值等於font-size的值，可是這樣的作法

沒法兼容全部主流的瀏覽器。

4.container大小不肯定，img大小不肯定

這種狀況能夠使用一個空的img元素來將行高設爲父元素高度的100%，如例子中的c類元素，空的img元素能夠設爲width:0;height:100%

須要注意瀏覽器兼容性問題，即（每一層）父容器要明確設置height，如height:100%，這樣img的max-height:100%纔會正確地限制在父容器裏，

另：能夠使用js來實時獲取container和img的大小，將問題轉化爲狀況1-3。

效果圖：

參考：

http://www.zhangxinxu.com/wordpress/2009/08/大小不固定的圖片、多行文字的水平垂直居中/大小不固定的圖片、多行文字的水平垂直居中/

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。