css垂直居中属性设置vertical-align: middle对div不起作用，例如：

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

 <meta charset="utf-8">

 <meta http-equiv="X-UA-Commpatible" content="IE=edge">

 <title>DIV垂直居中对齐</title>

 <style type="text/css">

 * {

     margin: 0;

     padding: 0;

 }

 html, body {

     width: 100%;

     height: 100%;

 }

 body {text-align: center; vertical-align: middle;}

 .outer {

     width: 400px;

     height: 120px;

     position: relative;

     left: 20px;

     top: 20px;

     text-align: center;

     vertical-align: middle;

     border: 1px dashed blue;

 }

 .button {

     width: 200px;

     height: 40px;

 }

 </style>

 </head>

 <body>

     <div class='outer'>

         <button class='button'>在DIV中垂直居中</button>

     </div>

 </body>

 </html>

运行后按钮没有在DIV中垂直居中：

解决思路：如果div和按钮的宽高都确定为具体像素值，可以直接设定按钮的css属性：position：relative; top为(div.height - button.height)/2，left为(div.width-button.height)/2；否则给按钮添加一个div父元素，宽高和按钮相 同，position设定为relative，top和left都为50%（即左上角位置设定在外层div的中心），再将按钮左上角位置坐标设定为父元素 div宽高（也等于按钮自身宽高）的-50%

详细代码如下：

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

 <meta charset="utf-8">

 <meta http-equiv="X-UA-Commpatible" content="IE=edge">

 <title>DIV垂直居中对齐</title>

 <style type="text/css">

 * {

     margin: 0;

     padding: 0;

 }

 html, body {

     width: 100%;

     height: 100%;

 }

 body {text-align: center; vertical-align: middle;}

 .outer {

     width: 400px;/* 或者为百分比 */

     height: 120px;

     position: relative;

     left: 20px;

     top: 20px;

     border: 1px dashed blue;

 }

 .inner {

     width: 200px;

     height: 40px;

     position: relative;

     position: relative;

     top: 50%;

     left: 50%;

 }

 .button {

     width: 200px;

     height: 40px;

     position: relative;

     top: -50%;

     left: -50%;

 }

 </style>

 </head>

 <body>

     <div class='outer'>

         <div class='inner'>

             <button class='button'>在DIV中垂直居中</button>

         </div>

     </div>

 </body>

 </html>

再次运行后，div中按钮上下居中显示

END

DIV内容垂直居中的更多相关文章

  1. div居中与div内容居中,不一样

    1.div自身居中 使用margin:0 auto上下为0,左右自适应的css样式. 要让div水平居中,那么除了设置css margin:0 auto外,还不能再设置float,不然将会导致div靠 ...

  2. [转]如何让div中的内容垂直居中

    转自:http://blog.163.com/yan_1990/blog/static/197805107201211311515454/ 虽然Div布局已经基本上取代了表格布局,但表格布局和Div布 ...

  3. div中的内容垂直居中的五种方法

    一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...

  4. 如何让div中的内容垂直居中

    虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处.比如表格布局中的垂直居中就是Div布局的一大弱项,不过好在千变万化的CSS可以灵活运用,可以制作出准垂直居中效果, ...

  5. CSS总结div中的内容垂直居中的五种方法

    一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...

  6. 使用CSS使内容垂直居中的N中方法。

    使用css+div使页面内容水平居中的方法大家并不陌生,那么如何使内容垂直居中呢? OK,下面进入正题,不如我们使用做高中数学题时经常用的思想:分情况讨论.   1.当待垂直居中的DIV高宽为已知时: ...

  7. 如何让div水平垂直居中

    引子 我们经常遇到需要把div中的内容进行水平和垂直居中.所以,这里介绍一种方法,可以使div水平居中和垂直居中. 代码: <!DOCTYPE html> <html lang=&q ...

  8. DIV实现垂直居中的几种方法

    说道垂直居中,我们首先想到的是vertical-align属性,但是许多时候该属性并不起作用.例如,下面的样式并不能达到内容垂直居中显示 div { width:200px; height:300px ...

  9. jquery鼠标移动div内容上下左右滚动

    jquery鼠标移动div内容上下左右滚动 点击这里查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/9.htm <!DOCTYPE html PUBLI ...

随机推荐

  1. listctrl查找定位 使用测试过还很好用

    35.listctrl查找定位  使用测试过还很好用 // 简单的查找函数// FindString(CListCtrl& , 查找内容 , 开始位置 , 到达底部时是否从头查找) int F ...

  2. 应用程序添加角标和tabBar添加角标，以及后台运行时显示

    1.设置角标的代码:   // 从后台取出来的数据可能是int型的不能直接给badgeValue(string类型的),需要通过description转化  NSString *count = [re ...

  3. python 读取一个目录下的所有目录和文件

    #!/usr/bin/python # -*- coding:utf8 -*- import os allFileNum = 0 def printPath(level, path): global ...

  4. MapRedece(单表关联)

    源数据:Child--Parent表 Tom Lucy Tom Jack Jone Lucy Jone Jack Lucy Marry Lucy Ben Jack Alice Jack Jesse T ...

  5. 对于Python中回调函数的理解

    关于回调函数,网上有很多说明和各种解释,多数在尝试用语言描述.我认为,如果对各个角色之间的关系不清楚,如果没有相关的编程需求,那么语言便非常无力,很难理解. 这是360百科的解释: 在计算机程序设计中 ...

  6. KMP算法小记

    Knuth-Morris-Pratt算法: 转载来自http://www.ruanyifeng.com/blog/2013/05/Knuth%E2%80%93Morris%E2%80%93Pratt_ ...

  7. XTU 1267 - Highway - [树的直径][2017湘潭邀请赛H题(江苏省赛)]

    这道题可能有毒……总之一会儿能过一会儿不能过的,搞的我很心烦…… 依然是上次2017江苏省赛的题目,之前期末考试结束了之后有想补一下这道题,当时比较懵逼不知道怎么做……看了题解也不是很懂……就只好放弃 ...

  8. HTML_body标签

    常用符号:空格:&nbsp 大于号:&gt 小于号: &lt 块级标签:H标签(加大加粗),P标签(段落间有间距),DIV(白板) 行内标签:SPAN标签(白板) <!- ...

  9. Ubuntu16.04下写的Qt程序，调试时没问题，运行时偶现崩溃 （需要在运行时生成core dump文件，QMAKE_CC += -g）

    记录一下 Ubuntu16.04下写的Qt程序,调试时没问题,运行时偶现崩溃 需要在运行时生成core dump文件 首先在pro结尾里加入 QMAKE_CC += -g QMAKE_CXX += - ...

  10. 洛谷P4289 移动玩具 HAOI2008 搜索+状压

    正解:状压 解题报告: 先,放下传送门QwQ 说真的我jio得这题不管是思路还是实现上,都还是有一定难度的?然后就看到神仙hl博客里一句"太水了不讲了"就过掉了,,,好的趴太强辽Q ...