1.利用display:table-cell,具体代码如下:

html代码如下:

 <div class="img_wrap">
   <img src="wgs.jpg">
 </div>

css代码如下:

 .img_wrap{
     width: 400px;
     height: 300px;
     border: 1px dashed #ccc;
     display: table-cell; //主要是这个属性
     vertical-align: middle;
     text-align: center;
 }

效果如下:

2.采用背景法:

html代码如下:

 <div class="img_wrap"></div>

css代码如下:

.img_wrap{
    width: 400px;
    height: 300px;
    border: 1px dashed #ccc;
    background: url(wgs.jpg) no-repeat center center;
}

效果如下图:

3.图片外面用个p标签,通过设置line-height使图片垂直居中:

html代码如下:

 <div class="img_wrap">
     <p><img src="wgs.jpg"></p>
 </div>

css代码如下:

 *{margin: 0px;padding: 0px}
 .img_wrap{
     width: 400px;
     height: 300px;
     border: 1px dashed #ccc;
     text-align: center;}
 .img_wrap p{
     width:400px;
     height:300px;
     line-height:300px;  /* 行高等于高度 */
 }
 .img_wrap p img{
     *margin-top:expression((400 - this.height )/2);  /* CSS表达式用来兼容IE6/IE7 */
     vertical-align:middle;
     border:1px solid #ccc;
 }

效果图如下:

css 使图片水平垂直居中的更多相关文章

  1. CSS制作图片水平垂直居中

    所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器),并且图片位居此容器正中间(中间是指元素容器的正中间),而图片不是以背景图片(background-image ...

  2. CSS制作图片水平垂直居中 亲测推荐

    空白标签实现图片的垂直居中 这种方法很有意思,也很有独特之处,我的思路也是来自于张鑫旭-鑫空间-鑫生活写的<大小不固定的图片.多行文字的水平垂直居中>一文中的使用空白图片实现垂直对齐.他主 ...

  3. CSS中图片水平垂直居中方法小结

    写页面时难免会遇到水平垂直居中的问题,总结一下最近使用的方法. 一.使用垂直居中和水平居中 <div id="div1"> <img src="img/ ...

  4. 纯CSS实现图片水平垂直居中于DIV(图片未知宽高)

    <div class="demo"><a href="#"><img src="http://nec.netease.c ...

  5. css中元素水平垂直居中4种方法介绍

    table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...

  6. Flexbox制作CSS布局实现水平垂直居中

    Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head>  & ...

  7. CSS实现元素水平垂直居中—喜欢对称美,这病没得治

    [TOC] 在CSS中对元素进行水平居中是非常简单的:如果它是一个行内元素,就对它的父元素应用text-align:center;如果它是一个块级元素,就对它自身应用margin:auto.然而要对一 ...

  8. CSS布局之-水平垂直居中

    对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.另外,文中的css都是用less书写的,如果看不懂less,可以把我给的 ...

  9. CSS(3)实现水平垂直居中效果

    CSS实现水平垂直居中对齐 在CSS中实现水平居中,会比较简单.常见的,如果想实现inline元素或者inline-block元素水平居中,可以在其父级块级元素上设置text-align: cente ...

随机推荐

  1. Jsp的九大对象,七大动作,三大指令

    jsp九大内置对象:1>out 向客户端输出数据,字节流.如out.print(" dgaweyr"); 2>request 接收客户端的http请求.String g ...

  2. AOJ 0121: Seven Puzzle【BFS】

    From: AOJ 0121 思路:与前几题的bfs不同,这次的bfs没有明确的移动对象,看似任意一个数都可以当成对象移动.这时我们只需要抓住一个格子就行,比如我们把0作为移动对象,那么0在地图中漫游 ...

  3. 前端必须了解的布局常识:普通流(normal flow)

    目录 一.概述 二.块级元素和内联元素 常见的块级元素 BFC 常见的行内元素 IFC 三.哪些情况会脱离普通流 浮动 绝对定位 固定定位 display:none 四.总结 五.参考资料 一.概述 ...

  4. OpenCV的数据类型---Cv

    CvScalar就是一个包含四个元素的结构体变量. CvScalar定义可存放1—4个数值的数值,其结构如下. typedef struct CvScalar{    double val[4];}C ...

  5. Java经典实例:进阶版堆栈实现,支持任何对象类型

    支持任何对象类型,有更多的错误检查. package Stack; /** * Created by Frank */ public class MyStack<T> implements ...

  6. (转)RSA算法原理(二)

      作者: 阮一峰 日期: 2013年7月 4日 上一次,我介绍了一些数论知识. 有了这些知识,我们就可以看懂RSA算法.这是目前地球上最重要的加密算法. 六.密钥生成的步骤 我们通过一个例子,来理解 ...

  7. xcode 6 创建的工程上下有黑边

  8. 隐藏ArcGIS server设置的用户名

    打开注册表编辑器,定位到“HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Winlogon\ SpecialAccoun ...

  9. Eclipse启动报错:An internal error occurred during: &quot;Initializing Java Tooling&quot;.

    An internal error occurred during: "Initializing Java Tooling".java.lang.NullPointerExcept ...

  10. 监听TelephonyManager的通话状态来监听手机的所有的来电

    import java.io.FileNotFoundException;import java.io.OutputStream;import java.io.PrintStream;import j ...