<!doctype html>

<html lang="en">

  <head>

    <meta charset="utf-8" />

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

    <title>CSS垂直居中</title>

    <style type="text/css">

      div {

        display:table-cell;

        vertical-align:middle;

        text-align:center;

        width:500px;

        height:500px;

        background:#B9D6FF;

        border: 1px solid #CCC;

      }

    </style>

    <!--[if IE]>

<style type="text/css">

i {

    display:inline-block;

    height:100%;

    vertical-align:middle

    }

img {

    vertical-align:middle

    }

</style>

<![endif]-->

  </head>

  <body>

    <h1>垂直居中(inline-block法)</h1>

    <div class="container">

      <i></i>

      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />

    </div>

  </body>

</html>

它的核心就是为外边框加了display：table-cell，说起来display这个属性，指让标签元素以表格单元格的形式呈现，类似于td标签，因为单元格可以使元素垂直居中。　

css未知高度垂直居中的更多相关文章

  1. CSS解决未知高度垂直居中

    尽管有CSS的vertical-align特性,但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下). 标准浏览器如Mozilla, Opera, Safari ...

  2. css实现高度垂直居中

    1:单行文字垂直居中: 如果一个容器中只有一行文字的话,定义height(高度)和 line-height(行高)相等即可. 如:<div style="height:25px;lin ...

  3. CSS未知div高度垂直居中代码_层和布局特效

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

  4. 纯CSS基于窗口垂直居中

    都是IE8+的 <!DOCTYPE html> <html> <head> <title>基于窗口垂直居中 by 司徒正美</title> ...

  5. css实现固定高度及未知高度文字垂直居中的完美解决方案

    在工作当中我们经常碰到类似于"固定高度文字垂直居中及未知高度垂直居中问题",或者 "图片垂直居中问题",而我们最容易会想到使用表格来垂直居中,或者如果是单行文字 ...

  6. CSS实现未知高度图文混合垂直居中

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-06-26) CSS实现未知高度图文混合垂直居中,阅读CSS实现未知高度图文混合垂直居中. IE6,IE7,FF3测试通过 ...

  7. css实现未知高度水平垂直居中

    页面设计中,经常需要实现元素的水平垂直居中,css实现的方法有很多(列如: margin: auto.position定位.css表达式calc().使用css预处理.table等都可以实现水平居中) ...

  8. div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)

    说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的 CSSHack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的 ...

  9. 巧用CSS居中未知高度的块元素

    在网页中让一个未知高度的块元素水平垂直居中是一个老生常谈的问题,但是总是有些特殊场景让你无法得心应手的实现居中,本文介绍几种常用的经典的居中方法,总有一种适合你! 1. position .paren ...

随机推荐

  1. Myeclipse 反编译工具插件

    JadClipse是java的反编译工具,是命令行执行,反编译出来的源文件可读性较高.可惜用起来不太方便.还好 找到myeclipse下的插件,叫JadClipse,安装好之后,只要双击.class文 ...

  2. 三维动画形变算法（Mixed Finite Elements）

    混合有限元方法通入引入辅助变量后可以将高阶微分问题变成一系列低阶微分问题的组合.在三维网格形变问题中,我们考虑如下泛函极值问题: 其中u: Ω0 → R3是变形体的空间坐标,上述泛函极值问题对应的欧拉 ...

  3. 07 python学习笔记-写一个清理日志的小程序（七）

    #删掉三天前的日志 #1.获取到所有的日志文件, os.walk #2.获取文件时间 android 2019-09-27 log,并转成时间戳 #3.获取3天前的时间 time.time() - 6 ...

  4. Java socket Tcp协议 实现文件传输

    1.文件加密上传后发现文件已损坏: 原因:使用 read(byte[]) 方法不能够准确的获取到正确的字节数,有可能比 byte[].length 小,所以在解密的时候出现错误. 解决办法: 判断读取 ...

  5. PHP的陷阱

    PHP的陷阱 写代码的时候有个疑惑,那就是数组下标不存在的时候就会挂掉Undefined Index XXXX,这是对的,但是有时候他就不报错,这又是矛盾的. 请看下面的例子: $json_raw = ...

  6. C/C++语言误区void main( )

    很多人甚至市面上的一些书籍,都使用了void main( ) ,其实这是错误的.C/C++ 中从来没有定义过void main( ) .C++ 之父 Bjarne Stroustrup 在他的主页上的 ...

  7. (day31) Event+协程+进程/线程池

    目录 昨日回顾 GIL全局解释器锁 计算密集型和IO密集型 死锁现象 递归锁 信号量 线程队列 FOFI队列 LIFO队列 优先级队列 今日内容 Event事件 线程池与进程池 异步提交和回调函数 协 ...

  8. Redis（九）哨兵：Redis Sentinel

    Redis的主从复制模式下,一旦主节点由于故障不能提供服务,需要人工将从节点晋升为主节点,同时还要通知应用方更新主节点地址,对于很多应用场景这种故障处理的方式是无法接受的. Redis从2.8开始正式 ...

  9. mysql 主从同步（转）

    教程开始:一.安装MySQL 说明:在两台MySQL服务器192.168.21.169和192.168.21.168上分别进行如下操作,安装MySQL 5.5.22  二.配置MySQL主服务器(19 ...

  10. python-nmap使用及案例

    nmap概念及功能 概念 NMap,也就是Network Mapper,最早是Linux下的网络扫描和嗅探工具包. nmap是一个网络连接端扫描软件,用来扫描网上电脑开放的网络连接端.确定哪些服务运行 ...