1. 对于可以一行处理的 设置 height:apx; line-height:apx;

2.对于一段文字(会多行显示的)
            ->2.1如果是可以设置一个固定高度的
                    父元素使用display:table; height: apx;  子元素使用 display:table-cell; vertical-align:middle;

     note: vertical-align属性只对部分html元素有效 具体是拥有valign特性的(X)HTML标签

比如<img>       基本上 对于inline-block显示的元素(内联元素)有效

    ->2.2如果是一个高度不固定的
                    设置上下 一样的内补 padding-top:apx; padding-bottom:apx;

->2.3 使用csshack支持ie6 垂直居中 综合考虑 table-cell方案 多层嵌套
                    div#wrap {
                        display:table;
                        border:1px solid #FF0099;
                        background-color:#FFCCFF;
                        width:760px;
                        height:400px;
                        _position:relative;
                        overflow:hidden;
                    }

div#subwrap {
                        vertical-align:middle;
                        display:table-cell;
                        _position:absolute;
                        _top:50%;
                    }

div#content {
                        _position:relative;
                        _top:-50%;
                    }

参考:http://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/

css垂直居中的几种方式的更多相关文章

  1. CSS实现水平垂直居中的1010种方式

    转载自:CSS实现水平垂直居中的1010种方式 划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居 ...

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

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

  3. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

  4. HTML 引用Css样式的四种方式

    不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者 内部引用方式1: 直接在标签内用 style 引用,如: <div ...

  5. 原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  6. python 中增加css样式的三种方式

    增加css样式的三种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  7. 【javascript】原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  8. 我给女朋友讲编程CSS系列(1) –添加CSS样式的3种方式及样式表的优先权

    如果说,原生态就是美,那么,我们就没有必要穿衣打扮. 网页是什么? 说白了,网页就是一堆[html标签]有序的搭配,让[CSS属性值]整整容,请[Javascript语言]处理一下事件. 一个人的整容 ...

  9. 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点? 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝

    第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...

随机推荐

  1. JDK5 新特性

     JDK5新特性目录导航: 自动拆装箱 Foreach 静态导入 可变参数 Var args 枚举 格式化输出 泛型 ProcessBuilder 内省 线程并发库(JUC) 监控和管理虚拟机 元数据 ...

  2. 在唯一密钥属性“fileExtension”设置为“.”时,无法添加类型为“mimeMap”的重复集合项

    在ASP.NET 网站的配置文件中添加了MIME类型,但是运行网站后在IIS上和页面上提示"在唯一密钥属性“fileExtension”设置为“.woff”时,无法添加类型为“mimeMap ...

  3. c#常用数据结构解析【转载】

    引用:http://blog.csdn.net/suifcd/article/details/42869341 前言:可能去过小匹夫博客的盆油们读过这篇对于数据结构的总结,但是小匹夫当时写那篇文章的时 ...

  4. Laravel系列 Web

    一.Homestead准备 上一篇文章已经对它的配置进行了说明,下面对Homestead.yaml进行说明 --- ip: "192.168.10.10" memory: 2048 ...

  5. HDU3853 概率DP

    LOOPS   Homura wants to help her friend Madoka save the world. But because of the plot of the Boss I ...

  6. C# 在窗口绘制图形(打点、画圆、画线)

    需要包含命名空间 using System.Drawing; 画图前需要先创建画板 void Display() { Graphics g = this.CreateGraphics(); //创建画 ...

  7. Linux与BSD不同

    https://linux.cn/article-3186-1.html https://www.howtogeek.com/190773/htg-explains-whats-the-differe ...

  8. Android 懒加载简单介绍

    1.懒加载介绍 1.1.效果预览 1.2.效果讲解 当页面可见的时候,才加载当前页面. 没有打开的页面,就不会预加载. 说白了,懒加载就是可见的时候才去请求数据. 1.3.懒加载文章传送门 参考文章: ...

  9. 集合源码分析之 HashSet

    一 知识准备 HashSet 是Set接口的实现类,Set存在的最大意义区别于List就是,Set中存放的元素不能够重复,就是不能够有两个相同的元素存放在Set中,那么怎样的两个元素才算是相同的,这里 ...

  10. linux下解压命令大全[转]

    本文是复制大神的博文, 供自己参考. 原文出处:http://www.cnblogs.com/eoiioe/archive/2008/09/20/1294681.html .tar 解包:tar xv ...