<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*===================================*/
.d1{
height: 60px;
line-height:60px;
border:1px solid black;
}
/*===================================*/
.d2{
margin-top: 20px;
padding-top: 20px;
padding-bottom: 20px;
border:1px solid black;
}

.warp{
margin-top: 20px;
display: table;
border: 1px solid yellow;
height: 400px;
width: 300px;
}
.d3{
vertical-align: middle;
display: table-cell;
border: 1px solid green;
}
/*===================================*/
.outer{
margin-top: 20px;
display: table;
border: 1px solid red;
height: 600px;
width: 300px;
overflow: hidden;
*position: relative;
background-color:green\0; /* ie 8/9*/
background-color:blue\9\0; /* ie 9*/
*background-color:#dddd00; /* ie 7*/
_background-color:#CDCDCD; /* ie 6*/
}
.inner{
vertical-align: middle;
display: table-cell;
/*border: 1px solid black;*/
/*text-align: left;*/
*position: absolute;
*top:50%;
}
.content{
*position: relative;
*top:-50%;
}
/*===================================*/

</style>
</head>
<body>
<div class="d1">1：我是单行垂直居中，原理：height: 60px === line-height:60px </div>
<div class="d2">2：多行未知高度文字的垂直居中,原理：padding-top: 20px; === padding-bottom: 20px;</div>
<div class="warp">
<div class="d3">
3；多行文本固定高度的居中，原理,：
父元素样式：display: table;height: 400px;
子元素样式：vertical-align: middle;display: table-cell;
<span style="font-size:20px;color:red">
Internet Explorer 6,7 并不能正确地理解display:table和display:table-cell，
Internet Explorer 6,7 及以下的版本中是无效的
</span>
</div>
</div>
<div class="outer">
<div class="inner">
<div class="content">
<span style="font-size:20px;color:red">
Internet Explorer 6,7 并不能正确地理解display:table和display:table-cell，
Internet Explorer 6,7 及以下的版本中是无效的<br/>
</span>
兼容Internet Explorer 6,7:多行文本固定高度的居中
<br/>
.outer{
margin-top: 20px;
display: table;
border: 1px solid red;
height: 300px;
width: 300px;
overflow: hidden;
*position: relative;
}<br/>
.inner{
vertical-align: middle;
display: table-cell;
/*border: 1px solid black;*/
/*text-align: left;*/
*position: absolute;
*top:50%;
}
</div>
</div>
</div>
<!-- 以下内容不知道怎么回事，达不到左对齐
　　<div class="outer">
　　　　<div class="inner">
　　　　　　<div id="content">
兼容Internet Explorer 6:多行文本固定高度的居中
　　　　　　</div>
　　　　</div>
　　</div>
-->

</body>
</html>

css 垂直居中的更多相关文章

  1. CSS垂直居中指南

    大概整理下css中的垂直居中问题 主要分两大类 1 知道块元素尺寸,一般就是指知道元素高度. 方法一:最简单的,类比水平居中. 思路:子元素设置为absolute;  top bottom都设置为0 ...

  2. 最常用的css垂直居中方法

    css垂直居中一直以来都是一个被大家说烂了的话题,翻来覆去的炒.不过说实话,正是因为css没有提供标准的垂直居中方法(不过在css3中已经有了相关规范),所以大家才会对它进行专门的研究.这研究来研究去 ...

  3. css垂直居中方法

    CSS垂直居中的简便方法:{position:absolute;left:0;bottom:0;top:0;right:0;margin:auto;}.

  4. CSS垂直居中完美有用实例

    <!DOCTYPE HTML>           <html>            <head>             <meta meta chars ...

  5. Day14:CSS垂直居中

    verticle-align:middle vertical-align:middle实现css垂直居中是常用的方法,但是需要注意,vertical生效的前提是diaplay:inline-block ...

  6. CSS垂直居中的8种方法

    CSS垂直居中的8种方法 1.通过verticle-align:middle实现CSS垂直居中. 通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注 ...

  7. 完美实现CSS垂直居中的11种方法

    在做前端项目时CSS的水平居中我们经常使用,但有时还会用到CSS垂直居中,对于小白来说这个就有些难度了,下面看一下我是如何实现的 本人前端小白,正在做一个小程序开发的项目,css样式调整搞的头都大了. ...

  8. css 垂直居中技巧

    CSS垂直居中技巧,我只会23个,你会几个?自古以来(是有多?~),网页CSS的垂直居中需求始终没有停过,而其困难度也始终没有让人轻松过,经过了每位开发先烈的研究后,据说CSS的垂直居中技巧已达到近十 ...

  9. CSS垂直居中的11种实现方式

    今天是邓呆呆球衣退役的日子,在这个颇具纪念意义的日子里我写下自己的第一篇博客,还望前辈们多多提携,多多指教! 接下来,就进入正文,来说说关于垂直居中的事.(以下这11种垂直居中的实现方式均为笔者在日常 ...

  10. CSS垂直居中总结

    工作中遇到垂直居中问题,特此总结了一下几种方式与大家分享.本文讨论的垂直居中仅支持IE8+ 1.使用绝对定位垂直居中 <div class="container"> & ...

随机推荐

  1. 触控的手牌—Cocos Creator

    科普 Cocos Creator是触控最新一代游戏工具链的名称.如果不太清楚的,可以先看一些新闻.   新编辑器Cocos Creator发布: 对不起我来晚了! http://ol.tgbus.co ...

  2. ABP框架 - 设置管理

    文档目录 本节内容: 简介 关于ISettingStore 定义设置 setting scope(设置范围) 重写设置定义 获取设置值 服务端 客户端 修改设置 关于缓存 简介 每个应用必需存储一些设 ...

  3. Android Weekly Notes Issue #231

    Android Weekly Issue #231 November 13th, 2016 Android Weekly Issue #231 Android Weekly阅读笔记, Issue #2 ...

  4. HTML5移动开发学习笔记之Canvas基础

    1.第一个Canvas程序 看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> < ...

  5. 我为NET狂群福利：逆天常用的一些谷歌浏览器插件

    逆天书库:http://www.cnblogs.com/dunitian/p/5734677.html 常用工具:http://www.cnblogs.com/dunitian/p/5640147.h ...

  6. ubuntu14.04安装及web环境的搭建

    在进行接下来的工作之前首先得准备一个Ubuntu的启动U盘以及腾出一个至少50G的系统盘(在网上看到有人用20G的,不知道效果怎么样).关于Ubuntu启动U盘大家可以参考这个帖子 http://ti ...

  7. RXJava by Example--转

    原文地址:https://www.infoq.com/articles/rxjava-by-example Key takeaways Reactive programming is a specif ...

  8. 野路子出身PowerShell 文件操作实用功能

    本文出处:http://www.cnblogs.com/wy123/p/6129498.html 因工作需要,处理一批文件,本想写C#来处理的,后来想想这个是PowerShell的天职,索性就网上各种 ...

  9. 产品前端重构（TypeScript、MVC框架设计）

    最近两周完成了对公司某一产品的前端重构,本文记录重构的主要思路及相关的设计内容. 公司期望把某一管理类信息系统从项目代码中抽取.重构为一个可复用的产品.该系统的前端是基于 ExtJs 5 进行构造的, ...

  10. 虚拟机安装CentOS6.4

    1  概述 虚拟机(Virtual Machine)指通过软件模拟的具有完整硬件系统功能的.运行在一个完全隔离环境中的完整计算机系统,运行在主机上,完全独立,虚拟机里面的所有操作不会影响主机,即使虚拟 ...