<!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. 为什么重写equals必须重写hoshCode的基础分析

    为什么重写equals必须重写hoshCode的基础分析 1.我们先来了解下原生的equals和hashCode代码 原生equals:它判断的是两个对象是否相等 原生hashCode值:它是根据内存 ...

  2. 压敏电阻的保护作用—NDF达孚电子科技

    压敏电阻是常见的电子元器件之一,它的保护作用被大家熟知和运用.压敏电阻的主要用于在电路承受过压时进行电压钳位,吸收多余的电流以保护灵敏器件.压敏电阻的导电特性随着施加电压的变化呈非线性变化,它能保护电 ...

  3. 下载达 10 万次的 IDEA 插件，K8s 一键部署了解一下？

    作者 | 铃儿响叮当 导读:涉及开发的技术人员,永远绕不开的就是将应用部署到相应服务器上,本文将给大家讲解:对于容器服务 ACK,怎么实现真正"一键部署",提高开发部署效率,在 K ...

  4. OptimalSolution(2)--二叉树问题（4）子树与拓扑结构

    一.判断t1树是否包含t2树全部的拓扑结构 1 / \ 2 3 2 / \ / \ / \ 4 5 6 7 4 5 / \ / / 8 9 10 8 返回:true 解法(O(M×N)):如果t1中某 ...

  5. django-URL匹配（二）

    1.新建django项目 django-admin startproject newwebsite 2.建立app 在newwebsite目录下:python manage.py startapp b ...

  6. Spring Boot项目在多环境下（开发、生产或测试环境）调用不同配置文件方式

    写在前面 最近由于项目要求,原先的项目只有开发环境的项目配置,后来不利于线上测试,于是,最近对于SpringBoot这部分多环境配置在网上查找了相关资料,并实现了配置,于是为了防止遗忘,特在此进行总结 ...

  7. SpringBoot整合elasticsearch(三)

    Docker安装elasticsearch 启动注意2点,1是内存,2是线程数(此处进行简单安装,后面会详细补充es文档) [root@topcheer ~]# docker images REPOS ...

  8. web.xml不同版本的头信息

    web.xml v2.3 <?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE web- ...

  9. LeetCode 二叉树的层次遍历

    第102题 给定一个二叉树,返回其按层次遍历的节点值. (即逐层地,从左到右访问所有节点). 例如: 给定二叉树: [3,9,20,null,null,15,7], 3 / \ 9 20 / \ 15 ...

  10. 从函数计算架构看 Serverless 的演进与思考

    作者 | 杨皓然  阿里巴巴高级技术专家 导读:云计算之所以能够成为 DT 时代颠覆性力量,是因为其本质是打破传统架构模式.降低成本并简化体系结构,用全新的思维更好的满足了用户需求.而无服务器计算(S ...