<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

　　　　　/* 利用 flex 来进行布局，百度可以看看   */

        /*  方法一  align-items：垂直居中，justify-content:center 竖直居中 */

        /*.parent{  display: flex;align-items: center;text-align: center;justify-content:center;  }*/

        /*.son{display: inline-block}*/

        /*.parent{  display: flex;justify-content:center;}*/

        /*.son{display: inline-block;align-self: center;}*/

        /*  方法二  这种似乎子节点要宽高*/

        .parent{position: relative}

        .son{position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto}

        /*  方法三  */

        /*.parent{display: table-cell;vertical-align: middle;text-align: center}*/

        /*.son{display: inline-block;}*/

        /*  方法四  */

        /*.parent{position: relative}*/

        /*.son{position: relative;top: 50%;left: 50%;*/

            /*-webkit-transform: translate(-50%,-50%);*/

            /*-moz-transform: translate(-50%,-50%);*/

            /*-ms-transform: translate(-50%,-50%);*/

            /*-o-transform: translate(-50%,-50%);*/

            /*transform: translate(-50%,-50%);}*/

        /*  方法五  */

        /*.parent{  text-align:center;  }*/

        /*.parent:after{  display:inline-block;  width:0;  height:100%;  vertical-align:middle;  content:'';  }*/

        /*.son{  display:inline-block;  vertical-align:middle;  }*/

    </style>

</head>

<body>

<div class="parent" style="width: 500px;height: 400px;border: 1px solid #ccc">

   <div class="son" style="height: 200px;width: 300px;border: 1px solid #ddd">宽高不固定,让 son 在 parent 垂直竖直居中。</div>

</div>

</body>

</html>

　　

　

一共基本的方法，根据不同的业务可以自己选择。

css上下垂直居中方法总结的更多相关文章

  1. CSS图片垂直居中方法

    让div里面的多行文本垂直居中的方法: div{height:100px;width:100px;border:solid 1px red;text-align:center; display:tab ...

  2. CSS元素垂直居中方法总结

    坚持,坚持,坚持... 以上为自我鼓励,哈哈... ------------------------------------------------- 相信没有真正是尝试过的人应该都和我一样,觉得居中 ...

  3. css水平垂直居中方法（一）

    第五种方法: 首先设置一个div,设置其的width与height,为了方便观察,我定义了div的背景色为red,代码如下: <!doctype html> <html lang=& ...

  4. css元素垂直居中方法

    1.Line-height 适用情景:单行文字垂直居中技巧 这个方式应该是最多人知道的了,常见于单行文字的应用,像是按钮这一类对象,或者是下拉框.导航此类元素最常见到的方式了.此方式的原理是在于将单行 ...

  5. CSS图片垂直居中方法整理集合

    原帖链接:http://bbs.blueidea.com/thread-2666987-1-1.html 1.因为Opera,FF3,IE8均支持display:talbe;这些特性了,因此改进的办法 ...

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

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

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

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

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

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

  9. 最常用的css垂直居中方法

    css垂直居中一直以来都是一个被大家说烂了的话题,翻来覆去的炒.不过说实话,正是因为css没有提供标准的垂直居中方法(不过在css3中已经有了相关规范),所以大家才会对它进行专门的研究.这研究来研究去 ...

随机推荐

  1. Python中*args和**kwargs的使用

    函数定义 使用*args和**kwargs传递可变长参数: *args用作传递非命名键值可变长参数列表(比如元组) **kwargs用作传递键值可变长参数列表(比如字典) 函数入参 *args 传递一 ...

  2. jsp学习笔记 - 内置对象 application

    ---恢复内容开始--- 1.application一般用this.getServletContext()替代 2.appllication有一个非常有用的函数 getRealPath(),获取绝对路 ...

  3. Modbus测试工具ModbusPoll与Modbus Slave使用方法

    感谢https://blog.csdn.net/byxdaz/article/details/77979114原创,由于CSDN经常调整,故再编辑收藏,并修改了部分BUG. 一.介绍 Modbus P ...

  4. HDU_1789_doing homework again_贪心

    Doing Homework again Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Oth ...

  5. Win7访问不了WINXP共享文件

    用win xp的机器可以访问,但用win 7的机器无法访问共享文件 提示:您没有权限访问.请与网络管理员联系请求访问权限 网上找了相应的资料 做了如下动作 1. 打开网上邻居→本地连接→属性里,“看是 ...

  6. CodeFrist基础_Fluent Api

    一丶首先新建两个实体类 public class Student { public int StudentKey { get; set; } public string StudentName { g ...

  7. 【原】thinkphp修改Redis操作类，支持选择数据库功能及添加其他方法

    版本3.2.2(ThinkPHP\Library\Think\Cache\Driver\Redis.class.php), 一:官方默认不支持选择数据库功能及,现就可选择数据库功能进行说明. 1 co ...

  8. BZOJ 2693: jzptab 莫比乌斯反演 + 积性函数 +筛法

    Code: #include<bits/stdc++.h> #define ll long long #define M 10001000 #define maxn 10200100 #d ...

  9. ListView常用属性 (2012-01-12 17:20:27)

    比较特别的属性,通过设置这样的属性可以做出更加美观的列表.stackFromBottom——设置该属性之后你最新条目就会显示你列表的最下面,值为true和false,如android:stackFro ...

  10. UVA - 12661 Funny Car Racing （Dijkstra算法）

    题目: 思路: 把时间当做距离利用Dijkstra算法来做这个题. 前提:该结点e.c<=e.a,k = d[v]%(e.a+e.b); 当车在这个点的1处时,如果在第一个a这段时间内能够通过且 ...