图片垂直居中（2015-12-11更新）-白红宇

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

阅读量：7007 次

发布时间：2019-06-27

本文共 1811 字，大约阅读时间需要 6 分钟。

#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;}

首先是水平居中的问题，这个问题比较好解决，这里有两种方法：

对img元素使用display:block;margin:0 auto;

在父元素上使用text-align:center，并且img元素设为display:inline（默认），同时为了去掉间距，可以使用font-size:0;

然后是垂直居中的问题，这里的解决方法要求父容器是固定的大小的（不随子元素的变化而变化），即有设置height和width，例如设置：width:100%,height:80%；

分为四种情况：

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

对于这种情况可以直接设置margin或padding

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

对于这种情况可以使用定位的方法解决，父元素设为position:relative；img元素设为

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）类型。

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。

效果图：

参考：

转载于:https://my.oschina.net/hwxn/blog/538874

你可能感兴趣的文章