直接看代码：

<!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. (转)Linux: dirname、basename命令详解

    Linux: dirname.basename命令详解 原文:http://blog.sina.com.cn/s/blog_3f63916f010143vo.html 一.dirname指令 1.功能 ...

  2. 《从0到1学习Flink》—— Flink 中几种 Time 详解

    前言 Flink 在流程序中支持不同的 Time 概念,就比如有 Processing Time.Event Time 和 Ingestion Time. 下面我们一起来看看这几个 Time: Pro ...

  3. nginx中文手册内容说明

    1.什么是nginx? Nginx 是一个高性能的 Web 和反向代理服务器, 它具有有很多非常优越的特性: 作为 Web 服务器:相比 Apache,Nginx 使用更少的资源,支持更多的并发连接, ...

  4. 八个cmd 命令

    一,ping 它是用来检查网络是否通畅或者网络连接速度的命令.作为一个生活在网络上的管理员或者黑客来说,ping命令是第一个必须掌握的DOS命令,它所利用的原理是这样的:网络上的机器都有唯一确定的IP ...

  5. EL_JSTL

    EL(Expression Language)EL表达式 作用:在JSP中消灭java代码 语法: "${ }" 用法:参考jsp页面 //Servlet中,: User user ...

  6. java8 peek

    这样不会有任何的输出:Stream.of("one", "two", "three", "four").peek(e - ...

  7. bootstrap Table 服务端处理分页 后台是.net

    要考虑函数可被可重复使用(调用),需要将可变化的变为参数封装起来 function HQCreatTables(ob) { var option = { method: 'get', dataType ...

  8. angularjs嵌套路由

    index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  9. Java集合框架—Map

    Map集合:该集合存储键值对.一对一对往里存.而且要保证键的唯一性. 1,添加. put(K key, V value)  putAll(Map<? extends K,? extends V& ...

  10. Flash图表控件FusionCharts调整图表百分比大小

    用户可以为图表的宽度和高度设置百分比值,用来替代绝对的像素值. 以百分比的方式调整图表,首先需要更新HTML代码,如下所示: <div id="chartContainer" ...