<!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. Windows环境下使用Netsh命令快速切换IP配置

    不同的内网环境需要使用不同的IP配置,频繁切换令人发狂,因此搜索了快速切换IP配置的方法. Netsh interface IP Set address "以太网" Static ...

  2. Hadoop Hive概念学习系列之hive的数据压缩（七）

    Hive文件存储格式包括以下几类: 1.TEXTFILE 2.SEQUENCEFILE 3.RCFILE 4.ORCFILE 其中TEXTFILE为默认格式,建表时不指定默认为这个格式,导入数据时会直 ...

  3. NodeJs学习记录（六）使用 res.locals 传递参数到页面

    res.locals的生命周期是单次请求,有点类似于java servlet 里的  httpServletRequest.setAttribute("param1",1); 既然 ...

  4. vue+vux+es6+webpack移动端常用配置步骤

    1.创建项目(vue项目的流程就不多讲了)2.cnpm install vux --save3.在build/webpack.base.conf.js配置:const vuxLoader = requ ...

  5. rem布局进入页面样式错乱解决

    开发项目时候第一次遇到rem布局进入页面瞬间样式错乱问题: //该段js为rem布局应用 如10px = 0.1rem; (function(doc, win) { var docEl = doc.d ...

  6. Windows sever 2003 IIS6.0 搭建DVWA

    DVWA 环境: Windows Sever 2003 IIS 6.0+MYSQL+PHP5.4+FASFCGI 详细教程: http://files.cnblogs.com/files/yyx001 ...

  7. Linux系统命令及文件的浏览、管理和维护

    在linux中什么是一个文件的路径呢,说白了就是这个文件存在的地方,例如在上一章提到的/root/.ssh/authorized_keys 这就是一个文件的路径.如果你告诉系统这个文件的路径,那么系统 ...

  8. 【转】非常好的Java反射例子

    转自 http://www.douban.com/note/306848299/ 原文: 1.Java反射的概念 反射含义:可以获取正在运行的Java对象. 2.Java反射的功能 1)可以判断运行时 ...

  9. Application received signal SIGSEGV

    Application received signal SIGSEGV (null) (( 0 CoreFoundation 0x0000000181037d50 <redacted> + ...

  10. Masonry 原理一

    Under the hood Auto Layout is a powerful and flexible way of organising and laying out your views. H ...