1、父元素确定的单行垂直居中

通过设置父元素的 height 和 line-height 高度一致来实现的。

2、父元素确定的多行垂直居中

父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种：

2.1、vertical-aligh方法：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。

说到竖直居中，css 中有一个用于竖直居中的属性 vertical-align，但这个样式只有在父元素为 td 或 th 时，才会生效。所以又要插入 table 标签了。

<body>

<table><tbody><tr><td class="wrap">

<div>

    <p>看我是否可以居中。</p>

    <p>看我是否可以居中。</p>

    <p>看我是否可以居中。</p>

    <p>看我是否可以居中。</p>

    <p>看我是否可以居中。</p>

</div>

</td></tr></tbody></table>

</body>

　　因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以不需要显式设置。

　　2.2、激活vertical-align属性方法：

在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。

<style>

.container{

    height:300px;

    background:#ccc;

    display:table-cell;/*IE8以上及Chrome、Firefox*/

    vertical-align:middle;/*IE8以上及Chrome、Firefox*/

}

</style>

<div class="container">

    <div>

        <p>看我是否可以居中。</p>

        <p>看我是否可以居中。</p>

        <p>看我是否可以居中。</p>

        <p>看我是否可以居中。</p>

        <p>看我是否可以居中。</p>

    </div>

</div>

　　3、隐性改变元素display值

　　当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：

  1. position : absolute
  2. float : left 或 float:right

元素会自动变为以 display:inline-block 的方式显示，当然就可以设置元素的 width 和 height 了且默认宽度不占满父元素。

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

  1. 五种方法让CSS实现垂直居中

    利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...

  2. CSS实现垂直居中的5种方法

    利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...

  3. 经验分享：多屏复杂动画CSS技巧三则

    当下CSS3应用已经相当广泛,其中重要成员之一就是CSS3动画.并且,随着CSS动画的逐渐深入与普及,更复杂与细腻的动画场景也如雨后春笋般破土而出.例如上个月做的「企业QQ-新年祝福」活动: 感谢sh ...

  4. 应该知道的25个非常有用的CSS技巧

    在我们的前端CSS编码当中,经常要设置特殊的字体效果,边框圆角等等,还要考虑兼 容性的问题, CSS网页布局,说难,其实很简单.说它容易,往往有很多问题困扰着新 手,在中介绍了非常多的技巧,这些小技巧 ...

  5. 转: css实现垂直居中的方法

    利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 用 CSS 实现垂直居中并不容易.有些方法在一些浏览器中 ...

  6. 20个很有用的CSS技巧

    导语:下面这几个CSS技巧你可能不知道,1.彩色照片变黑白,2.所有元素垂直居中,3.禁用鼠标,4.模糊文字,小编学完能量满满的,觉得对CSS又充满了爱,你也来看看. 1. 黑白图像 这段代码会让你的 ...

  7. 50个CSS技巧

    这里我工作中收集了10个很不错的CSS技巧,你可以用在你的项目上.它可以帮你很好地整理你的元素并让他们看起来蛮酷的.下面开始我们的内容,希望你会喜欢它.下面是我收集的CSS技巧,希望能帮助到你,感觉收 ...

  8. 最全的CSS浏览器兼容问题【CSS技巧 】

    CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格 ...

  9. 100个实用的CSS技巧，以及遇见的问题和解决方案。

    前言 本篇文章将会持续更新,我会将我遇见的一些问题,和我看到的实用的CSS技巧记录下来,本篇文章会以图文混排的方式写下去.具体什么时候写完我也不清楚,反正我的目标是写100个.  本案例都是经本人实测 ...

随机推荐

  1. finger 工具：用来查询用户信息，侧重用户家目录、登录SHELL等

    finger 工具侧重于用户信息的查询:查询的内容包括用户名(也被称为登录名Login),家目录,用户真实的名字(Name)... ... 办公地址.办公电话:也包括登录终端.写状态.空闭时间等: 我 ...

  2. python打包成为exe文件

    pyinstaller 库的使用 PyInstaller是一个十分有用的第三方库,它能够在Windows.Linux.Mac OS X 等操作系统下将 Python 源文件打包,通过对源文件打包,Py ...

  3. jquery ajax跨越

    JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问 1.jsonp之$.ajax js $.ajax({ ...

  4. vue-i18n 的用法

    主要用于网站国际化,开发可以切换多语言的网站 1,安装 npm install vue-i8n 2,在main.js中引入和注册 import VueI18n from 'vue-i18n' impo ...

  5. 傻瓜式教程--实现登录页面的验证码以及验证(VUE)

    做成之后就 是这个样子 接下来上代码创建一个组件.显示验证码图片 <template> <div class="s-canvas"> <canvas ...

  6. web服务器--nginx简介

    nginx 介绍Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器,同时也提供了IMAP/POP3/SMTP服务.Nginx是一款轻量级的Web 服务器/反向代理服务器及电 ...

  7. 各种语言web性能简单对比测试

    忽然想比较一下  python  nodejs  go 的web 响应,就简单的写了个性能对比测试. 测试目标:1 . i5 4核 32G  同一机器   linux 2.  用python(flas ...

  8. Java是如何实现跨平台的

    一.Java是如何实现跨平台的 1.我们编写的Java源码,编译后会生成一种 .class 文件,称为字节码文件 2.Java虚拟机JVM就是负责将字节码文件翻译成特定平台下的机器码然后运行.也就是说 ...

  9. CSS-画三角

    要实现三角的效果有很多方法: 例如下面的页面就需要三角: 其中, <!DOCTYPE html> <html lang="en"> <head> ...

  10. 书写更加高效的CSS，走出误区

    根据一些CSS写作经验,如何提高渲染效率及所占用消耗的资源,我们来浅谈一下CSS的渲染效率,书写高效的CSS. 1.十六进制的颜色值对位数与大小写 编写十六进制颜色值时你可能会用小写字母或省略成3位数 ...