<!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. E - Cheap Kangaroo（求多个数的最大公约数）

    Description There are N kangaroos going out to eat at an Indian restaurant. The ith kangaroo wants t ...

  2. 专题四：自定义Web浏览器

    前言: 前一个专题介绍了自定义的Web服务器,然而向Web服务器发出请求的正是本专题要介绍的Web浏览器,本专题通过简单自定义一个Web浏览器来简单介绍浏览器的工作原理,以及帮助一些初学者揭开浏览器这 ...

  3. [ Luogu 3924 ] 康纳的线段树

    \(\\\) \(Description\) 现在有一个线段树维护长为\(N\)的数列,实现方式是\(mid=((l+r)>>1)\),支持区间加,节点维护区间和. 共有\(M\)次区间加 ...

  4. 151. [USACO Dec07] 建造路径

    ★★   输入文件:roads.in   输出文件:roads.out   简单对比 时间限制:1 s   内存限制:128 MB 译 by CmYkRgB123 描述 Farmer John 刚刚得 ...

  5. 华硕（ASUS）X554LP笔记本重装win7后网卡和USB驱动问题的解决

    以前在其它笔记本上采用U盘克隆安装winxp系统非常顺利,各种硬件驱动能自动识别并安装. 手上有一台别人的华硕(ASUS)X554LP笔记本,原装win8.1,用不惯,想装个win7旗舰版. 照例去系 ...

  6. zabbix3.0_网络发现问题

    问题1. Zabbix网络发现system.uanem找不到主机,打开zabbix_server.conf文件的debug DebugLevel=5 # 错误信息如下 # item [system.u ...

  7. [iOS]查看苹果支持的所有字库

    有时候,在开发的时候,想换个字体更加优雅的显示.但是不知道苹果本身到底支持了那些字体,怎么办? 没关系,打开这个网址:http://iosfonts.com/ 所见即所得,非常方便,而且还表明了从那个 ...

  8. Change the color of a link in an NSMutableAttributedString

    Swift Updated for Swift 3 Use with a textView.linkTextAttributes = [NSForegroundColorAttributeName: ...

  9. 母牛的故事(hdoj 2018,动态规划递推,详解)

    有一头母牛,它每年年初生一头小母牛.每头小母牛从第四个年头开始,每年年初也生一头小母牛.请编程实现在第n年的时候,共有多少头母牛? Sample Input2450Sample Output246 / ...

  10. 输入框点击下滑Ztree菜单

    记录一个功能实现代码,我这边前端用的是layui,需要实现的效果如下: 需求:当点击选择地区的时候会出现如上图的下拉菜单. 分析:首先肯定给这个输入框加监听,click方法,然后将ztree的div显 ...