第一种方法：首先用margin：0 auto实现水平居中，然后设置position:relative，设置top为50%（父元素高度的50%），然后设置margin-top：-150px（设置负值是因为要向上移动div，150px是div的height），代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>index</title>
  6.     <style>
  7.         html,body {
  8.             width: 100%;
  9.             height: 100%;
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.         .content {
  14.             width: 300px;
  15.             height: 300px;
  16.             background: orange;
  17.             margin: 0 auto; /*水平居中*/
  18.             position: relative;
  19.             top: 50%; /*偏移*/
  20.             margin-top: -150px;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <div class="content"></div>
  26. </body>
  27. </html>

实现效果如下：

因为div有了高度，可以给其指定overflow：auto，这样如果div中的内容太多的话，就会出现滚动条。该方法的有点在于可以不用那么多的嵌套标签，而且适用于所有的浏览器，缺点在于，如果浏览器窗口缩小到一定程度时，会div会消失

第二种方法：在上面的方法的基础上除了设置margin-top向上移动之外，还可以设置css3的transform属性也可以实现这个功能，通过设置div的transform:translateY(-50%)，意思是使得div向上平移（translate）自身高度的一半(50%)，代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>index</title>
  6.     <style>
  7.         html,body {
  8.             width: 100%;
  9.             height: 100%;
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.         .content {
  14.             width: 300px;
  15.             height: 300px;
  16.             background: orange;
  17.             margin: 0 auto; /*水平居中*/
  18.             position: relative;
  19.             top: 50%; /*偏移*/
  20.             transform: translateY(-50%);
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <div class="content"></div>
  26. </body>
  27. </html>

第三种方法：使用CSS3的弹性布局（flex）的话，问题就会变得容易多了。使用CSS3的弹性布局很简单，只要设置父元素（这里是指body）的display的值为flex即可。

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>index</title>
  6.     <style>
  7.         html,body {
  8.             width: 100%;
  9.             height: 100%;
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.  
  14.         body {
  15.             display: flex;
  16.             align-items: center; /*定义body的元素垂直居中*/
  17.             justify-content: center; /*定义body的里的元素水平居中*/
  18.         }
  19.         .content {
  20.             width: 300px;
  21.             height: 300px;
  22.             background: orange;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <div class="content"></div>
  28. </body>
  29. </html>

css垂直居中方法（一）的更多相关文章

  1. 最常用的css垂直居中方法

    css垂直居中一直以来都是一个被大家说烂了的话题,翻来覆去的炒.不过说实话,正是因为css没有提供标准的垂直居中方法(不过在css3中已经有了相关规范),所以大家才会对它进行专门的研究.这研究来研究去 ...

  2. css垂直居中方法

    CSS垂直居中的简便方法:{position:absolute;left:0;bottom:0;top:0;right:0;margin:auto;}.

  3. css垂直居中方法总结

    在网页布局中,我们往往会遇到下图所示的场景,让小图标和文字对齐 可能有的小伙伴会说,这个简单,直接给小图标设置左浮动来实现. 这样做是可以的,但不推荐,毕竟浮动是会影响布局的,能少用还是少用. 以前遇 ...

  4. css垂直居中方法（四）

    第六种方法,使用css的writing-mode属性,结合margin:auto. 参考文章:改变CSS世界纵横规则的writing-mode属性 传统的web流中,margin设置auto值的时候, ...

  5. css 垂直居中方法总结

    工作中遇到垂直居中问题,特此总结了一下几种方式与大家分享.本文讨论的垂直居中仅支持IE8+ 1.使用绝对定位垂直居中 HTML <div class="container"& ...

  6. css 垂直居中方法汇总

    查看原文可以有更好的排版效果哦 前言 居中是平时工作中的最常见的一种需求,各种图片居中或者各种弹窗,水平居中还好,特别是垂直居中,很多初学者表示太难写了,现在列举一些常用的方法. 实战 这里只讲述cs ...

  7. css垂直居中方法盘点

    1.单行文字垂直居中 利用 line-height 即可轻松实现,如下示例: height:45px;line-height:45px; 2.多行文本固定高度垂直居中1 利用 display:tabl ...

  8. [css] 垂直居中方法

    原文链接:http://www.cnblogs.com/2050/p/3392803.html 一.text-algin:center; 适用于行内元素水平居中,如图片.按钮.文字, 但是在IE67下 ...

  9. css垂直居中方法（二）

    第四种方法: 这个方法把一些div的显示方式设置为表格,因此我们可以使用表格的vartial-align属性. 代码如下: <!doctype html> <html lang=&q ...

随机推荐

  1. 云服务器pip下载老失败怎么办？

    pip install -i https://pypi.douban.com/simple django==1.9

  2. R语言入门基础

    教程:常用运算函数.对一般数据进行运算的常用函数: 1.round() #四舍五入 例:x <- c(3.1416, 15.377, 269.7) round(x, 0) #保留整数位 roun ...

  3. review15

    不同区域的星期格式 不同国家的星期的简称或全称有很大的不同.如果想用特定地区的星期格式来表示日期中的星期,可以用format的重载方法: format(Locale locale, 格式化模式,日期列 ...

  4. jsonp: js跨域

    JSONP是JSON with padding(填充式JSON或参数式JSON)的简写,是应用JSON的一种新方法,常用于服务器与客户端跨源通信,在后来的Web服务中非常流行.本文将详细介绍JSONP ...

  5. python中正则表达式的一些问题

    今天听到一句话,觉得很在理——"当你遇到一个问题,想到用正则表达式解决时,就变成了两个问题" 这也从侧面说明了正则表达式比较难理解.下面我将用通俗易懂的方式总结一下,最近遇到的一些 ...

  6. doeNET Framework 农历 ChineseLunisolarCalendar

    C:\Program Files (x86)\MSBuild\14.0\Bin\csc.exe test.cs # test.cs using System; using System.Diagnos ...

  7. memset函数用法及注意事项

    头文件 #include<cstring>// or #include<memory.h> ------------------------------------------ ...

  8. 本地安装phpcms步骤

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u012145816/article/details/72183032 http://download ...

  9. Boost 读写锁

    //#########测试多线程,读写锁,递归锁 #include <boost/thread.hpp> #include <boost/thread/recursive_mutex ...

  10. C程序设计语言阅读笔记

    预处理器 ->.i  编译器 >.s 汇编器 >.o 链接器  --可执行文件   ------------------ math.h头文件包含各种数学函数的声明,所有函数都返回一个 ...