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. CF538G （套路题）

    CF538G 题目大意 你有一个长度为\(l\)的指令序列,每个指令为向上,向下,向左,向右中的一种. 机器人会循环执行该序列,即,执行完第\(l\)个指令后,就会重新开始执行第一个指令. 现在,给你 ...

  2. bzoj 2503 相框——思路

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2503 我也知道应该只关注度数. #include<iostream> #incl ...

  3. @import vs #import - iOS 7

    It's a new feature called Modules or "semantic import". There's more info in the WWDC 2013 ...

  4. vim 查找及替换

    #全文(%)查找(s)行首2个空格开头(/^ ), 替换(g)为无即删掉(//) :%s/^ //g #全文查找每行尾的2个空格,删除 :%s/ $//g

  5. 关于网上大量对Vue双向绑定的错误理解

    对于Vue的双向绑定,现在基本是个前端都听说过,面试官也喜欢问这个问题.但对于Vue双向绑定的原理,掘金.博客园和segmentfault等技术社区充斥着大量的错误文章.这些文章的题目基本样子如下 “ ...

  6. jnhs-SpringMVC jsp页面向controller传递参数的五种方式

    一共是五种传参方式: 一:直接将请求参数名作为Controller中方法的形参 public  String login (String username,String password)   : 解 ...

  7. java 字符串拼接

    package com.fh.controller.pacm.checkbill; import com.google.common.base.Joiner; /** * 字符串拼接 * * @aut ...

  8. day37 04-Hibernate二级缓存：list和iterate方法比较

    get()和load()方法既可以向一级缓存区放数据,也可以向二级缓存区放数据.这是查询一个的情况.要是查询所有呢?注意, // 查询所有.Query接口的list()方法. // list()方法会 ...

  9. vue里图片压缩上传组件

    //单图上传 <template> <div> <div class="uploader" v-if='!dwimg'> <van-upl ...

  10. pycharm最新激活码2017

    最新的2017激活码 BIG3CLIK6F-eyJsaWNlbnNlSWQiOiJCSUczQ0xJSzZGIiwibGljZW5zZWVOYW1lIjoibGFuIHl1IiwiYXNzaWduZW ...