加上这两个就行

display:-webkit-box;     显示成盒子模式

-webkit-box-align:center;   垂直居中

-webkit-box-pack:center;   水平居中

<div class="center">
<img src="data:images/picture5.jpg" alt="杂志图片" >
</div>
.center{
width:600px; height:700px;margin:0 auto;background:#CDFFCC;
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-align:center;
-moz-box-align:center;
box-align:center;
-webkit-box-pack:center;
-moz-box-pack:center;
box-pack:center;
}

注意浏览器兼容前缀噢~

CSS3:图片水平垂直居中的更多相关文章

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

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

  2. 图片水平垂直居中(兼容IE6,IE7,firefox,opera,safari,其中图片可以是任何块元素)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. css实现图片水平垂直居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

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

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

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

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

  6. 关于div中图片水平垂直居中的问题

    最近在做一个项目,里面涉及到不固定尺寸要在div里面水平垂直居中显示 我没有用table布局,而是用了div+css,找了很久,终于在网上找到解决方案,特此记录备用 关键核心代码如下: <div ...

  7. css 使图片水平垂直居中

    1.利用display:table-cell,具体代码如下: html代码如下: <div class="img_wrap"> <img src="wg ...

  8. 实现div里的img图片水平垂直居中

    body结构 <body> <div> <img src="1.jpg" alt="haha"> </div> ...

  9. DIV以及图片水平垂直居中兼容多种浏览器

    纯css完美地解决图片以及div垂直水平居中,兼容IE7.0.IE6.0.IE5.5.IE5.0.FF.Opera.Safari具体实现css 如下,感兴趣的朋友可以参考下哈   第一种:全CSS控制 ...

随机推荐

  1. shell之流程控制

    一.if语句.while.for循环各种小例题 1.用户验证 [root@bogon ~]# cat buer.sh #!/bin/bash #user='buer' #password='1234. ...

  2. bzoj4240 zkw版

    复习一波zkw树                                                                      很显然最后建出来的图不是单调序列就是一个类似 ...

  3. Extjs3.4 合并单元格

    Ext3.4合并单元格   表格上添加grid-row-span样式

  4. 学习struts2

    有部分内容转载牛人的博客: http://blog.csdn.net/hudie1234567/article/details/6730481 http://blog.csdn.net/lishuan ...

  5. [ Python - 13 ] 批量管理主机必备模块

    批量管理程序必备模块 optparse configparser paramiko optparse模块 简介:        optparse模块主要用来为脚本传递命令参数功能 使用步骤: 1. i ...

  6. 使用 mybatis和oracle 数据库出现的问题

    mybatis 官网教程 http://www.mybatis.org/mybatis-3/zh/dynamic-sql.html 出现 Could not set parameters for ma ...

  7. Burp Suite的使用介绍

    在网上找了一篇关于Burp Suite的使用介绍,感觉写的基础的,下面就copy了,另外还有一篇<BurpSuite实战指南>的pdf是一位好心的“前辈”共享的https://www.gi ...

  8. ipython notebook install

    1.python install (ubuntut系统默认2.7.x) Github: https://github.com/ipython/ipython 2.sudo apt-get instal ...

  9. hadoop学习一:hadoop安装(hadoop2.4.1,ubuntu14.04)

    1.创建用户 adduser hduser 修改hduser用户权限: sudo vim /ect/sudoers ,在文件中增加 hduser  ALL=(ALL:ALL) ALL .

  10. Codeforces 863F - Almost Permutation

    863F - Almost Permutation 题意 给出每个位置可以放的数字的范围,定义 \(cost = \sum_{i=1}^{n}(cnt(i))^2\) ,其中 \(cnt(i)\) 为 ...