<!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. select多选

    1.css <style> .divBox{ width:400px; margin:100px auto; } .divBox span{ vertical-align:top; dis ...

  2. [转]TFS下的源代码控制

    本文转自:http://www.cnblogs.com/ajiefj/archive/2010/04/23/1718450.html 以下主要描述了: TFS源代码控制系统的基本场景 如何把一个项目添 ...

  3. Elasticsearch--更好的搜索_加权得分,脚本，同义词

    目录 Apache Lucene评分 Elasticsearch的脚本功能 脚本执行过程中可以使用的对象 使用自定义的脚本库 搜索不同语言的内容 使用加权影响得分 加权 function_score查 ...

  4. React 篇 Comment Model

    Model 原型 Comment Box <div className="commentBox"> <h1>Comments</h1> < ...

  5. Python批量生成用户名

    写在最前 平时在工作中尤其是在做压测的时候难免需要一些用户名和密码,写个简单的Python小脚本批量生成一些 代码示例 import random,string #生成大小字母和数字一起的大字符串 a ...

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

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

  7. NSAllowsArbitraryLoadsInWebContent NSAllowsArbitraryLoads

    By specifying NSAllowsArbitraryLoadsInWebContent, you are overriding NSAllowsArbitraryLoads on iOS 1 ...

  8. LeetCode第63题--不同路径

    一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为“Start” ).机器人每次只能向下或者向右移动一步.机器人试图达到网格的右下角(在下图中标记为“Finish”).现在考虑网格中 ...

  9. Java基础(九)--反射

    什么是反射? 在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性 这种动态获取的信息以及动态调用对象的方法的功能称为反射机制. 反射的前 ...

  10. js一般用法

    <1> 通过id查找html元素 var x=document.getElementById("intro");   <2> 通过标签名查找html元素 v ...