css上下垂直居中方法总结

<!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上下垂直居中方法总结的更多相关文章

CSS图片垂直居中方法
让div里面的多行文本垂直居中的方法: div{height:100px;width:100px;border:solid 1px red;text-align:center; display:tab ...
CSS元素垂直居中方法总结
坚持,坚持,坚持... 以上为自我鼓励,哈哈... ------------------------------------------------- 相信没有真正是尝试过的人应该都和我一样,觉得居中 ...
css水平垂直居中方法（一）
第五种方法: 首先设置一个div,设置其的width与height,为了方便观察,我定义了div的背景色为red,代码如下: <!doctype html> <html lang=& ...
css元素垂直居中方法
1.Line-height 适用情景:单行文字垂直居中技巧这个方式应该是最多人知道的了,常见于单行文字的应用,像是按钮这一类对象,或者是下拉框.导航此类元素最常见到的方式了.此方式的原理是在于将单行 ...
CSS图片垂直居中方法整理集合
原帖链接:http://bbs.blueidea.com/thread-2666987-1-1.html 1.因为Opera,FF3,IE8均支持display:talbe;这些特性了,因此改进的办法 ...
五种方法让CSS实现垂直居中
利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...
CSS实现垂直居中的5种方法
利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...
转: css实现垂直居中的方法
利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 用 CSS 实现垂直居中并不容易.有些方法在一些浏览器中 ...
最常用的css垂直居中方法
css垂直居中一直以来都是一个被大家说烂了的话题,翻来覆去的炒.不过说实话,正是因为css没有提供标准的垂直居中方法(不过在css3中已经有了相关规范),所以大家才会对它进行专门的研究.这研究来研究去 ...

随机推荐

用Movie显示gif(1)SimpleGif
代码如下: import android.content.Context; import android.graphics.Canvas; import android.graphics.Movie; ...
CSS之选择符、链接、盒子模型、显示隐藏元素
<html> <head> <meta charset="utf-8"> <title>选择符.链接.盒子模型.显示隐藏元素< ...
JavaScript 正则表达式（转自 mozilla）
正则表达式是被用来匹配字符串中的字符组合的模式.在JavaScript中,正则表达式也是对象. 这种模式可以被用于 RegExp 的 exec 和 test 方法以及 String 的 match.r ...
向listview控件中添加数据库数据
//连接字符串 string str = "Data Source=.;Initial Catalog=mu;User ID=sa;Password=111"; //创建数据库连接 ...
SQLiteDeveloper 工具
破解方法: cmd下执行命令: reg delete HKEY_CURRENT_USER\SharpPlus\SqliteDev /f
实现div左右上下都居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
内存溢出及Jvm监控工具
内存泄露与内存溢出内存溢出 out of memory,是指程序在申请内存时,没有足够的内存空间供其使用,出现out of memory. 内存泄露 memory leak,是指程序在申请内存后,无 ...
Sqoop hive 和mysql 交互完整案例
本文完成:在hive里建管理表:注入部分数据:利用sqoop导入mysql中期间:解决中文乱码问题飞行报告故障表建表命令查看表人工灌入少量数据 Windows系统向Linux系统数据传输 ...
Java_大数值_16.5.12
如果基本的整数和浮点数精度不能满足要求,那么可以使用java.math包中的BigInteger和BigDecimal这两个类.这两个类可以处理包含任意长度数字序列的数值.BigInteger类实现了 ...
facade模式-服务-配置----系统生成与配置
facade模式对外提供一组相关服务: 对内整合子系统: facade模式的创建过程需要依赖外部的配置. 配置完成以后才能使用服务. 推广开来,所有系统都需要生成与配置,然后才能对外提供服务.

css上下垂直居中方法总结

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

随机推荐

热门专题