直接看代码：

<!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. 024 Swap Nodes in Pairs 交换相邻结点

    给定一个链表,对每两个相邻的结点作交换并返回头节点.例如:给定 1->2->3->4,你应该返回 2->1->4->3.你的算法应该只使用额外的常数空间.不要修改列 ...

  2. 【Java】Tomcat 5默认的管理员用户和密码

    <?xml version='1.0' encoding='utf-8'?> <tomcat-users> <role rolename="tomcat&quo ...

  3. static修饰的类属性

    我看书上说:static成员总是唯一存在的,并且在多个对象之间互享. 因此想到,如果我在a.php中实例化了Person.class.php这个类,并给static $name赋值,那么在b.php中 ...

  4. centos6安装bochs

    安装包 bochs 2.6.8 平台 centos6 前提依赖 yum groupinstall -y "Server Platform Development" "De ...

  5. Miner3D Developer 开发工具

    ——可视化的数据挖掘整合工具 在开发项目中,客户的要求多种多样.当开发者面临高挑战的工作时,完全可以选择Miner3D这样的软件,依赖其强大的数据可视化的特点,以及其他的明显的技术优势,提供给最终用户 ...

  6. android通过fiddler代理，抓取网络请求

    安装fiddler过程省略 1, 2, 3, 4,手机需要跟电脑处于同一局域网,设置网络代理为电脑在局域网内的ip,端口为3步设置的port 5,电脑就可以通过fiddler监控手机的所有网络请求了( ...

  7. Jquery删除table里面checkbox选中的多个行

    自己闲来无聊,写了一篇关于jq选中复选框删除数据的一个功能,不足之处,还望多多包涵 js代码 <script type="text/javascript" src=" ...

  8. 二、C++复数的实现

    C++复数的实现 在数字图像处理领域,复数这一类型会被经常使用到.但是在C++和Qt中都没有可以使用的复数类.为了今后的方便,我们可以自己定义一个C++复数类,以便将来使用. 一.复数的属性 复数包含 ...

  9. jquery实现加载更多效果

    情况是当滑动条滑动到最底部的时候,数据显示出一部分的更多 思路:获取到浏览器屏幕的高度client,文档的高度h和滑动距离顶部的距离scroll,当h<=client+scroll的时候就是滑动 ...

  10. Ruby 学习笔记(一)

    环境搭建 本文基于Mac OS,windowns坑较多,建议使用Mac. xcode-select -p 检查是否安装xcode-select, 如果没有,通过xcode-select --insta ...