DIV或者DIV里面的图片水平与垂直居中的方法

<div class=“box”><img />
</div>

水平居中的常用方式：

　　text-align:center ——这可以实现子元素字体，图片的水平居中。

　　margin:0 auto —— 这是针对块元素的水平居中方法

垂直居中的常用方式：

　　 vertical-align: middle;——这个垂直居中属性，只对 inline 或者 inline-block 元素有效。

　　这里没考虑flex的垂直居中的用法

div中图片水平和垂直居中方式：

　　第一种方式：直接手动计算的方式。已知box的高度和图片的高度

.box{width: 300px;height: 300px;border: 1px solid red;text-align: center;
}
img{width: 80px;height: 80px;padding-top: 110px;
}

备注：这种方式是：用box的高度减去图片的高度再除以2，就是padding-top的值，当然也可以使用margin-top，这样也可以实现图片在div里垂直居中。水平居中就用 text-align: center; 就行了。

　　第二种方式：图片已知宽高

1 img{
2 　　　　position:relative;
3 　　　　top:50%;
4 　　　　left:50%;
5 　　　　margin-top:负图片height的一半；
6 　　　　margin-left：负图片width的一半；
7 　　}

　　第三种方式：图片未知宽高，box最好固定高度。

img{position: relative;top: 50%;left: 50%;transform: translate(-50%,-50%);
}

备注：如果不固定，自适应高度的话，图片估计会跑到div的上面一点。这种是使用css3的方式来实现水平垂直居中，当然兼容性的话，不支持transform就不支持这种方式了

　　第四种方式：把box当做单元格，box的宽高可不用设置，让图片自己扩张也行。这种方式box的宽高最好固定。当然不固定也能实现效果。

.box{width: 300px;height: 300px;vertical-align: middle;text-align: center;display: table-cell;border: 1px solid red;
}

备注： display: table-cell 相当于是把标签元素当作一个单元格来处理。唯一的缺点就是IE6/7不兼容。　　

　　第五种方式：使用table来达到水平垂直居中的效果。table的宽高已知

html:

1 <table class="img_meng_show">
2 　　<tr>
3 　　　　<td>
4 　　　　　　　<img src="">
5 　　　　</td>
6 　　</tr>
7 </table>

css:　　

1 .img_meng_show td{
2 　　　vertical-align: middle;
3 　　　text-align: center;
4 }

DIV水平和垂直居中的方法：

第一种方式：

HTML:

<div class="box></div>

css:

 1 .box{2 　　position:absolute(或者是fixed);3 　　top:0;4 　　left:0;5 　　bottom:0;6 　　right:0;7 　　margin:auto;8 　　width:100px;9 　　height:200px;
10 }

　这个能实现div垂直和水平居中，但是必要条件就是宽高必须加上，margin也必须加上。如果想里面的图片也水平和垂直居中，可以参照上面图片用margin-left这种方式；

　如果只想垂直居中，只要top与bottom，然后 margin:auto 0;

　同理，只想水平居中，只要top与bottom，然后 margin: 0 auto;

　但是这种方法不支持ie8以下。

第二种方式：

使用css3 translate的方法，也能让div垂直水平居中：

.box{position: fixed（或者absolute）;top: 50%;left: 50%;width: 100px;/*height: 100px;*/高度可以不定死background: skyblue;transform: translate(-50%,-50%);
}

如果是div中的div，即

<div class="out"><div class="in"></div>
</div>

这种结构，也可以参考图片在div中水平和垂直居中的方式实现。只是块元素的水平居中的话 text-align: center; 要换成 margin: 0 auto;

每天进步一点点。拜托大家转载的时候记得贴上我文章的连接，原创不容易，给条活路呗

DIV或者DIV里面的图片水平与垂直居中的方法 - 站住，别跑 - 博客园相关推荐

实现div元素和文字水平及垂直居中的方法（超简单，适应各种场合）
实现实现div元素和文字水平及垂直居中的方法如下: div元素水平居中:style="margin:0 auto" div元素垂直居中:style="padding: ( ...
[css] 写出你知道的CSS水平和垂直居中的方法
[css] 写出你知道的CSS水平和垂直居中的方法 flex布局水平垂直居中: <div class="outer"><di ...
博客园自定义背景图片
自从注册了博客园,整个大学就变得有趣起来了. 每天发发文章,看看他人故事.不亦乐乎. 园里个个都是人才,说话又好听,我超喜欢这里的! 我一开始也是用园里的主题,但是后来自己找到了很好看的图片,就想着想 ...
设置博客园的背景图片，自定义样式以及导航目录
无意间看到几个大神的博客园,人家的背景为啥是彩色的?为啥有动画效果?为啥能自定义功能?我递归懵逼的同时羡慕不已,于是找了几个文章整理了一下自己的博客园主页前提你需要开通设置里面的js权限,请求开通 ...
博客园cnblog用Markdown写博客的过程如何图片居中、添加缩进
刚开始写博客,对Markdown语法不熟悉,HTML也快全忘了.记录一下. 一.博客园插入图片(复制之后直接粘贴,而非上传的方式) 正常是这么显示的![](图片链接),这种形式没有办法进行图片居中或 ...
图片大小自适应垂直居中的方法
偶尔会有这样的需求:在不知道图片宽和高情况下,需要让图片水平和垂直居中在某个容器下,而且,如果图片宽或者高超出容器,需要按照比例进行缩放,下面介绍几个常见的方式: Javascript篇用JS的方式 ...
html图片自适应上下左右居中显示,图片大小自适应垂直居中的方法
偶尔会有这样的需求:在不知道图片宽和高情况下,需要让图片水平和垂直居中在某个容器下,而且,如果图片宽或者高超出容器,需要按照比例进行缩放,下面介绍几个常见的方式: Javascript篇: 用JS的方 ...
博客园上海俱乐部第二次活动全程图片报道（多图）
博客园上海俱乐部 2008年1月27日,是个值得纪念的日子,今天值得所有上海人记住,因为今天已经是连续三天下雪了-!天气那个冷呀!也正是在这月黑风高的下午,博客园上海俱乐部在上海书城举行了第二次活动. ...
让博客园的编辑器自动上传外链图片
让博客园的编辑器自动上传外链图片我经常翻译国外的文章,遇到这么个需求.如果要翻译的文章中包含了图片,那么复制到博客园的时候图片肯定是引用原网站的了.如果原网站是个人博客(任何时候域名都可能失效),或 ...

DIV或者DIV里面的图片水平与垂直居中的方法 - 站住，别跑 - 博客园

DIV或者DIV里面的图片水平与垂直居中的方法

DIV或者DIV里面的图片水平与垂直居中的方法 - 站住，别跑 - 博客园相关推荐

最新文章

热门文章