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. 【LOJ6077】「2017 山东一轮集训 Day7」逆序对 生成函数+组合数+DP

    [LOJ6077]「2017 山东一轮集训 Day7」逆序对 题目描述 给定 n,k ,请求出长度为 n的逆序对数恰好为 k 的排列的个数.答案对 109+7 取模. 对于一个长度为 n 的排列 p ...

  2. Mac - MySQL初始密码忘记重置MySQL root密码

    在什么情况下,需要重置root密码呢?那就是我们忘记了.还有一种比较坑的,那就是笔者的这种情况.按照正常的情况下,MySQL安装完之后,会弹出一个对话框,显示着一个临时的root密码,但无论笔者如何重 ...

  3. CentOS7.5搭建Solr7.4.0集群服务

    一.Solr集群概念 solr单机版搭建参考: https://www.cnblogs.com/frankdeng/p/9615253.html 1.概念 SolrCloud(solr 云)是Solr ...

  4. div的最小宽高和最大宽高

    div的最小宽高和最大宽高很少使用但是很实用,今天敲代码,就遇到了,要在div里设置滚动条,众所周知,一般是设overflow-y:auto,但需要一个高度,只有div里的内容超过这个高度时,才会有滚 ...

  5. linux系统下top命令参数详解

    简介 top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器. top显示系统当前的进程和其他状况,是一个动态显示过程,即可以通过用户按 ...

  6. Oracle管理监控之rlwrap-0.37.tar.gz实现sqlplus上下翻页

    1.上传rlwrap-0.37.tar.gz到linux 2.解压rlwrap-0.37.tar.gz [root@node1 mnt]# tar zxvf rlwrap-0.37.tar.gz [r ...

  7. iOS钱包卡券开发（往钱包里面加自己的卡券）

    参考文章 https://blog.csdn.net/sz_vcp2007/article/details/60762349 https://blog.csdn.net/eqera/article/d ...

  8. 2018/03/09 每日一学PHP 之 require_once require include include_once 包含文件的区别

    require_once require include include_once 方法的区别 对于包含文件来说,如果只是使用框架来说的话,应该会很少碰到,因为框架底层对于文件的引用等做了很好的封装, ...

  9. 【python-opencv】对象测量

    opencv 中轮廓特征包括: 如面积,周长,质心,边界框等 *弧长与面积测量 *多边形拟合 *获取轮廓的多边形拟合结果 python-opencv API提供方法: cv2.moments()用来计 ...

  10. Git 安装及使用小结

    Git 安装及使用小结 a:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline ...