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. c# 解决读取Excel混合文本类型,数据读取失败的解决方法

    错误重现: ----------------------------------------------------------------------- 在导入Excel读取数据时,其中的一个字段保 ...

  2. OpenLDAP部署目录服务

        文档信息 目        的:搭建一套完整的OpenLDAP系统,实现账号的统一管理.                     1:OpenLDAP服务端的搭建               ...

  3. Python学习第一弹

    开发语言: 高级:Python.java.PHP  C#   GO  ruby   C++           ——>字节码   低级:C.汇编                          ...

  4. 单源次短路径:poj:3255-Roadblocks

    Roadblocks Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 17521 Accepted: 6167 Descripti ...

  5. 笔记-falsk-入门-1

    笔记-falsk-入门-1 1.      前言 有几个概念需要解释下,WSGI,JINJA2,WERKZEUG Flask是典型的微框架,作为Web框架来说,它仅保留了核心功能:请求响应处理和模板渲 ...

  6. 笔记-python-redis接口

    笔记-python-redis接口 1.      python 与redis接口 redis是redis数据库的python接口包,为python提供的redis的调用接口. 注:文档内容主要基于h ...

  7. Hive 的企业优化

    优化 数据优化 一.从大表拆分成小表(更快地检索) 引用:Hive LanguageManual DDL eg2:常用于分表 create table if not exists default.ce ...

  8. Android 快捷方式的创建与查询 快捷方式问题大全 获取快捷方式在Launcher数据库中的信息 Failed to find provider info for com.android.la

    /** * 创建添加快捷方式 * 其中需要设置的有: * 1. 快捷方式的标题 * 2. 快捷方式的图标 * 3. 点击快捷方式后的跳转 */ public static void createSho ...

  9. spring boot 入门1-----如何使用@Value注解读取配置文件以及使用@ConfigrationProperties注解

    读取.yml文件属性值的方式 1)如何将配置文件中的属性值与字段匹配起来 @Value("${配置文件中属性的名}") 在application.yml文件中 server: po ...

  10. laravel5.5用户认证源码分析

    目录 1. 生成相关文件和配置 2. 分析路由文件 3. 以登陆开始为例,分析auth到底是怎么工作的 3.1 分析登录文件 3.2 分析门面Auth. 1. 生成相关文件和配置 快速生成命令 php ...