1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.  
  8. 　　　　　/* 利用 flex 来进行布局，百度可以看看   */
  9.         /*  方法一  align-items：垂直居中，justify-content:center 竖直居中 */
  10.         /*.parent{  display: flex;align-items: center;text-align: center;justify-content:center;  }*/
  11.         /*.son{display: inline-block}*/
  12.  
  13.         /*.parent{  display: flex;justify-content:center;}*/
  14.         /*.son{display: inline-block;align-self: center;}*/
  15.  
  16.         /*  方法二  这种似乎子节点要宽高*/
  17.         .parent{position: relative}
  18.         .son{position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto}
  19.  
  20.         /*  方法三  */
  21.         /*.parent{display: table-cell;vertical-align: middle;text-align: center}*/
  22.         /*.son{display: inline-block;}*/
  23.  
  24.         /*  方法四  */
  25.         /*.parent{position: relative}*/
  26.         /*.son{position: relative;top: 50%;left: 50%;*/
  27.             /*-webkit-transform: translate(-50%,-50%);*/
  28.             /*-moz-transform: translate(-50%,-50%);*/
  29.             /*-ms-transform: translate(-50%,-50%);*/
  30.             /*-o-transform: translate(-50%,-50%);*/
  31.             /*transform: translate(-50%,-50%);}*/
  32.  
  33.         /*  方法五  */
  34.         /*.parent{  text-align:center;  }*/
  35.         /*.parent:after{  display:inline-block;  width:0;  height:100%;  vertical-align:middle;  content:'';  }*/
  36.         /*.son{  display:inline-block;  vertical-align:middle;  }*/
  37.  
  38.     </style>
  39. </head>
  40. <body>
  41. <div class="parent" style="width: 500px;height: 400px;border: 1px solid #ccc">
  42.    <div class="son" style="height: 200px;width: 300px;border: 1px solid #ddd">宽高不固定,让 son 在 parent 垂直竖直居中。</div>
  43. </div>
  44. </body>
  45. </html>

　　

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

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. 295 Find Median from Data Stream 数据流的中位数

    中位数是排序后列表的中间值.如果列表的大小是偶数,则没有中间值,此时中位数是中间两个数的平均值.示例:[2,3,4] , 中位数是 3[2,3], 中位数是 (2 + 3) / 2 = 2.5设计一个 ...

  2. 《编写可维护的Javascript》学习总结

    第一部分 一.基本规范 1.缩进:一般以四个空格为一个缩进. 2.语句结尾:最好加上分号,因为虽然“自动分号插入(ASI)”机制在没有分号的位置会插入分号,但是ASI规则复杂而且会有特殊情况发生 // ...

  3. System.AppDomain类详解（一）

    AppDomain是CLR(Common Language Runtime:公共语言运行库),它可以加载Assembly.创建对象以及执行程序. AppDomain是CLR实现代码隔离的基本机制. 每 ...

  4. how to do a mass update in Laravel5 ( 在Laravel 5里面怎么做大量数据更新 )

    Today, I had spent 3 hours to fix one problem, The old program has a bug, originally, when a user pr ...

  5. [ NOI 2001 ] 食物链

    \(\\\) Description 有三类动物 \(A,B,C\),满足\(A\) 吃 \(B\),\(B\)吃 \(C\),\(C\) 吃 \(A\). 现有 \(N\) 个动物,以 \(1 - ...

  6. npm err报错解决

    最近看vue官网:按照官网步骤正确按照vue脚手架却报错 翻了很多,才发现是webpack的问题 npm install webpack-dev-server@2.9.7 --save ok,好了!

  7. JS高级——弹出框的美化

    替换原有的alert方法,window.alert=function(){} https://blog.csdn.net/kirsten_z/article/details/76242286 http ...

  8. Farseer.net轻量级开源框架 入门篇：使用前说明

    导航 目   录:Farseer.net轻量级开源框架 目录 上一篇:Farseer.net轻量级开源框架 入门篇: 框架性能测试 下一篇:Farseer.net轻量级开源框架 入门篇: 增.删.改. ...

  9. 使用openssl搭建CA并颁发服务器证书

    本来整理了一份执行脚本,但是没有找到附件功能.只好直接贴当时自己看过的链接了. 文章标题:Openssl Certificate Authority 转载链接:https://jamielinux.c ...

  10. 富士康的盈利秒杀99%的A股公司：3星|《三联生活周刊》2018年10期

    三联生活周刊·最美的数学:天才为何成群到来(2018年10期) 本期专题是数学和成都,我都跳过去没看.其他内容也还有点意思. 总体评价3星. 以下是本期一些内容的摘抄,#号后面是kindle电子版中的 ...