<!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. Bash 脚本编程语言中的美学与哲学

    我承认,我再一次地当了标题党.但是不可否认,这一定是一篇精华随笔.在这一篇中,我将探讨 Bash 脚本语言中的美学与哲学. 这不是一篇 Bash 脚本编程的教程,但是却能让人更加深入地了解 Bash ...

  2. 自动添加Linux登录账户，并授予sudo权限

    #!/bin/bash USER=test PASS=$USER GROUP=root HOME=/data/home/$USER # if user not exist if [[ $(cat /e ...

  3. jQuery +ajax +json+实现分页

    正文 首先我们创建一般处理程序,来读取数据库中内容,得到返回值. 创建文件,GetData.ashx. 我这里是用的存储过程,存储过程会再下面粘出来,至于数据只是实例,你们可根据需求自行读取数据 代码 ...

  4. HTML5_06之拖放API、Worker线程、Storage存储

    1.拖放API中源对象与目标对象事件间的数据传递: ①创建全局变量--污染全局对象:  var 全局变量=null;  src.ondragstart=function(){   全局变量=数据值;  ...

  5. 今天有群友不是很清楚htm直接存数据库的危害，我简单举个例子

     通过这个案例就知道为什么不要把原生的html放数据库了  常见的几种转码  常用的几种显示方法 只有原生html和最下面一种弹框了,变成了持久xss 如果是Ajax的方式,请用@Ajax.JavaS ...

  6. VS2010中dll不可用问题

    最近做项目的时候,深圳那边提供了一个算法.算法在那边跑的好的很,但是在我这边怎么跑都跑不起来,总是报错:说找不到dll. 1.第一种想法:找不到dll,是不是dll放的位置不对.找了一下目录,导入的路 ...

  7. iOS开发之"省市"二级联动的数据组织(PHP版)以及PickerView的实现与封装

    之所以要发表这篇博客,还源于最近的开发工作所实现的一个小的Demo, 当然这个Demo不会涉及工作中App的一些内容,下方要实现的Demo是通用的.因为项目需求的迭代,要求在银行卡绑定中添加支行所在的 ...

  8. SQL Tuning 基础概述05 - Oracle 索引类型及介绍

    一.B-Tree索引 三大特点:高度较低.存储列值.结构有序 1.1利用索引特性进行优化 外键上建立索引:不但可以提升查询效率,而且可以有效避免锁的竞争(外键所在表delete记录未提交,主键所在表会 ...

  9. 利用Python进行数据分析(2) 尝试处理一份JSON数据并生成条形图

    一.JSON 数据准备 首先准备一份 JSON 数据,这份数据共有 3560 条内容,每条内容结构如下: 本示例主要是以 tz(timezone 时区) 这一字段的值,分析这份数据里时区的分布情况. ...

  10. 深入学习jQuery描述文本内容的3个方法

    × 目录 [1]html() [2]text() [3]val()[4]总结 前面的话 在javascript中,描述元素内容有5个属性,分别是innerHTML.outerHTML.innerTex ...