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. day18-事务与连接池 7.事务隔离级别总结

  2. Docker（四）安装Redis

    1.安装redis https://blog.csdn.net/qq_29917523/article/details/78019511 2.测试连接

  3. TZ_09_常用jQuery操作

    1.实现对chexkbox进行批量删除 checkbox属性 <td><input name="ids" type="checkbox" va ...

  4. 浏览器在IE8 以下时显示提示信息,提示用户升级浏览器

    <!--[if lt IE 8]> <div style="background: #eeeeee;border-bottom: 1px solid #cccccc;col ...

  5. 关于python 环境变量

    1.默认命令行的启动的python 版本,这依赖于系统的环境变量. 见上一篇关于linux 环境变量的PATH 变量的设置 2.python 中 import 包的搜索路径, 即除了当前程序目录,能i ...

  6. Intent传递list集合时异常解决

    以前只是用intent传递一些简单的值,最近传递list集合时发现值总是传不过去,logcat报如下错误 说的是不能处理值为null的情况,回过头看list集合时确实发现有value为null的key ...

  7. java.lang.IllegalStateException: 1 matchers expected, 5 recorded.

    这是一个很神奇的错误. 常规的出错是因为在mock方法里,其中某一个或者几个参数使用了EasyMock.anyxx(),而其他的使用了具体的值. java.lang.IllegalStateExcep ...

  8. Oracle中Function学习2

    上一节说函数 这回聊一下 存储过程:有了上节知识点,对这个也许会一种小感觉.呵呵 过程(存储过程):与过程相比, 存储过程是存在数据库中的一个对象 我主要通过例子来了解 不做多解释 相信你也能明白: ...

  9. Angular.js的自定义功能

    1,自定义指令,在html中输入标签显示想要的指令 html script部分 2,标签中的属性的 有属性值时可以通过函数的参数返回属性值 没有属性值时可以设置属性值(自定义属性值) html部分   ...

  10. 使用Cmder 安装 Composer 出现 "attempt to call a nil value"

    原因: 不是这个原因,也不是那个原因,而是采用了中文路径, 把comder 整个搬到其他目录就行了