<!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. ASP.NET MVC Model元数据(五)

    ASP.NET MVC Model元数据(五) 前言 在上一篇中我们描述了应用于Model上面的各种用于显示控制的特性类,在本篇中将详细的介绍这些特性类的应用,虽然它们跟Model元数据的直接关系并不 ...

  2. 日期格式 CST

    从es 取出来一个date 字段, 结果竟然是 2016-10-10T10:48:58.000Z 这样的字符串, 这个是什么格式啊??? CST ? 只能自己转换了! 通过"yyyy-MM- ...

  3. Error on line -1 of document : Premature end of file. Nested exception: Premature end of file.

    启动tomcat, 出现, ( 之前都是好好的... ) [lk ] ERROR [08-12 15:10:02] [main] org.springframework.web.context.Con ...

  4. Objective-C 生成器模式 -- 简单实用和说明

    1.生成器模式的定义 将一个复杂的对象的构件与它的表示分离,使得同样的构建过程可以创建不同的表示 2.生成器模式的UML Builder :生成器接口,定义创建一个Product各个部件的操作 Con ...

  5. Atitit 图像处理和计算机视觉的分类 三部分 图像处理 图像分析 计算机视觉

    Atitit 图像处理和计算机视觉的分类 三部分 图像处理 图像分析 计算机视觉 1.1. 按照当前流行的分类方法,可以分为以下三部分:三部分 图像处理 图像分析 计算机视觉1 1.2. 图像处理需要 ...

  6. Vue 给子组件传递参数

    Vue 给子组件传递参数 首先看个例子吧 原文 html <div class="container" id="app"> <div clas ...

  7. bootstrap表格

    Bootstrap 实例 - 边框表格 < 建立日期 2015-5-27 录入人员 test1 处理人员 test2 问题报障人   部门/城市公司   联系电话   问题类型   处理状态   ...

  8. MUI 个推获取ClientID的方法

               本次是获取个推ClientID的方法              //监听消息开始             document.addEventListener("plus ...

  9. angular2系列教程（二）模板语法

    今天我们要讲的是angualr2的模板语法,官网写的很清楚,但我也用通俗易懂的讲法再罗列一下吧! 例子

  10. egret3D与2D混合开发，画布尺寸不一致的问题

    egret3d的GUI目前还没有,在做3d游戏的时候没有UI可用,只能使用egret2d的EUI组件库,egret3d与egret2d混合开发,canvas3d的大小与位置与canvas2d并没有重合 ...