<!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. SpringBoot-Mysql模板多数据源加载

    SpringBoot-Mysql模板多数据源加载 qq交流群: 812321371 微信交流群: MercyYao 简介 在 java 项目里常用到 mysql 多数据源操作.结合 springboo ...

  2. Kubernetes2-K8s的集群部署

    一.简介 1.架构参考 Kubernetes1-K8s的简单介绍 2.实例架构 192.168.216.51 master  etcd 192.168.216.53 node1 192.168.216 ...

  3. java中多线程 - 如何创建多线程

    线程 什么是线程: 线程是进程中的一个实体,是被系统独立调度和分派的基本单位,线程自己不拥有系统资源,只拥有一点儿在运行中必不可少的资源,但它可与同属一个进程的其它线程共享进程所拥有的全部资源 表面上 ...

  4. @EnableTransactionalManager 发生了什么

    @EnableTransactionalManager 利用TransactionManagementConfigurationSelector 给容器中注入bean,导入2个组件: AutoProx ...

  5. MybatisPlus3.X使用配置

    本文讲解了MyBatis-Plus在使用过程中的配置选项,其中,部分配置继承自MyBatis原生所支持的配置 基本配置 本部分配置包含了大部分用户的常用配置,其中一部分为 MyBatis 原生所支持的 ...

  6. swift 实现 iOS摇一摇

    本博客包含了如何实现iOS摇一摇全步骤,包括了完整的代码. 先附上demo地址https://github.com/Liuyubao/LYBShake ,支持swift3.0+. 一.导包 项目主要使 ...

  7. $POJ2942\ Knights\ of\ the\ Round\ Table$ 图论

    正解:图论 解题报告: 传送门! 一道,综合性比较强的题(我是萌新刚学$OI$我只是想练下$tarjan$,,,$QAQ$ 考虑先建个补图,然后现在就变成只有相互连边的点不能做邻居.所以如果有$K$个 ...

  8. Vue中Form表单验证无法消除验证问题

    iView的表单api给出了一个resetFields方法,用于重置整个表单输入的内容并清除验证提示. 但是有时候需要只消除部分的iview的resetFields方法源码是这样的resetField ...

  9. 《Effective Java》 读书笔记（六）避免创建不必要的对象

    java 有很多修饰类的属性的关键字:常用的static,final 说说final和static吧,平时在编程的时候,这两个关键字很多时候都觉得可有可无,最多的时候就是他们俩同时出现----定义常量 ...

  10. Mysql数据一般问题

    数据插入中文全部变为???问题: 1.停止Mysql服务: 2.修改C:\Program Files (x86)\MySQL\MySQL Server 5.5\My.ini default-chara ...