直接看代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>水平垂直居中</title>

    <meta name="description" content="">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>

        * { margin: 0; padding: 0; font-size: 12px; color: #FFF; }

        .container {

            display: table; /*主要代码*/

            *position: relative;  /*for ie67*/

            background-color: #FF5E53; width: 800px; height: 200px; overflow: hidden; margin: 0 auto;

        }

        .content {

            vertical-align: middle; display: table-cell; text-align: center; /*主要代码*/

            *position: absolute; *top: 50%; *left: 50%; /*for ie67*/

        }

        .center {

            display: inline-block; /*主要代码*/

            *display: inline; zoom: 1; *position: relative; *top: -50%; *left: -50%; /*for ie67*/

            padding: 10px; border: 1px solid #fff;

        }

    </style>

</head>

<body>

<div class="container">

    <div class="content">

        <div class="center">

            <img src="https://static.cnblogs.com/images/adminlogo.gif" /><br/>

            居中居中居中居中居中居中居中居中居中.....

        </div>

    </div>

</div>

</body>

</html>

水平垂直居中图片及文字(兼容IE6+)实例的更多相关文章

  1. css水平垂直居中

    margin法(水平居中) 需要满足三个条件: 元素定宽 元素为块级元素或行内元素设置display:block 元素的margin-left和margin-right都必须设置为auto 三个条件缺 ...

  2. css知识笔记：水平垂直居中（别只看，请实操！！！）

    css实现元素的水平垂直居中. (尝试采用5W2H方法说明): 别只看,请实操!!! What: 1.这篇文档主要描述元素水平方向居中的几种最常见和最实用的几种方式,并说明优缺点. 2.写这篇文章的目 ...

  3. 图片水平垂直居中（兼容IE6，IE7，firefox，opera，safari，其中图片可以是任何块元素）

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

  4. CSS实现文字和图片的水平垂直居中

    关于文字和图片的水平垂直居中,在前端界绝对算是一个老生常谈的问题了,尤其是垂直居中,什么千奇百怪的解法都能想的出来.下面我就总结一些比较常用的方法: 一.文本的水平垂直居中: 1.水平居中: 是不是很 ...

  5. 图文-水平垂直居中兼容ie6+

    图文-水平垂直居中兼容ie6+ 具体代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  6. css 单行图片文字水平垂直居中汇总

    (1) 水平居中 a. 行内元素水平居中 因为img是行内元素(行内块级元素也一样)父级元素设置text-align:center即可,例如: <div style="width: 6 ...

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

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

  8. IE6+未知尺寸元素水平垂直居中

    首先讨论在IE8以上(也就是支持伪元素after的基础上)的2种情况 当有一段不知道长度大小的文字在你面前,你需要使它垂直居中的时候,你肯定会想到:1.text-align:center;水平居中没错 ...

  9. table-cell实现未知宽高图片，文本水平垂直居中在div

    <BODY> <h1>未知宽高的图片水平垂直居中在div</h1> <!--box-outer--> <div class="box-o ...

随机推荐

  1. leetcode 91. 解码方法

    题目描述: 一条包含字母 A-Z 的消息通过以下方式进行了编码: 'A' -> 1 'B' -> 2 ... 'Z' -> 26 给定一个只包含数字的非空字符串,请计算解码方法的总数 ...

  2. Hive 基本语法操练（三）：分区操作和桶操作

    (一)分区操作 Hive 的分区通过在创建表时启动 PARTITION BY 实现,用来分区的维度并不是实际数据的某一列,具体分区的标志是由插入内容时给定的.当要查询某一分区的内容时可以采用 WHER ...

  3. 2009年3月新浪PHP面试题及答案(二)

    1.请写出PHP5权限控制修饰符. 答案:private protected public. 2.对于大流量的网站,您采用什么样的方法来解决访问量问题? 答案:首先,确认服务器硬件是否足够支持当前的流 ...

  4. Ionic 解决gradle下载慢的问题

    问题 使用Ioinc添加安卓平台或者编译的时候,提示gradle-XXX-all.zip下载,此进度缓慢. 解决 下载gradle对应的zip文件. 参考资源:http://services.grad ...

  5. 北航oo作业第三单元小结

    一.梳理JML语言的理论基础 1.jml的注释结构 jml注释语言的每一行都以@作为开始,若是块注释,则需要在注释块的首尾使用/*@ 与@*/ 2.jml的表达式体系 1.原子表达式 表达式可以看作是 ...

  6. hibernate课程 初探单表映射1-10 JUnit测试

    三大注解: 1 @Test 2 @Before 3 @After 执行顺序213 demo.java package hibernate_001; import org.junit.After; im ...

  7. 比例缩放 on() prop() 正则表达式

    $('#banner-section').css('height',$(window).width() / 1900 * 490 ); $(window).resize(function(){    ...

  8. javascript中call()、apply()、bind()的用法理解

    一.bind的用法 第一个:obj.showInfo('arg','arg_18');中传的2个参数通过showInfo方法改变的是obj下中的name和age 第二个:obj.showInfo.bi ...

  9. JavaScript常用数组操作方法

    数组是用于储存多个相同类型数据的集合,平时在数据的处理中用到最多,JavaScript 中常用的操作方法 1.concat()concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,仅 ...

  10. jquery的trigger和triggerHandler区别

    网上关于这个问题都是抄来抄去的,都没怎么说清楚.所以自己做了个测试,供大家参考指教.首先先看API怎么说的 为了检验一下,编写了一个简单的测试代码,如下: <html lang="en ...