在做页面的过程中,在很多地方都会遇到元素需要水平垂直的居中这个问题,之前总是去网上搜别人的代码,今天仔细研究了一下,分享给大家,先写一个简单的例子:

<div class="mui-content">
  <div id="logo_wrap">
  </div>
</div>

我就是想把id为logo_wrap的元素整个页面居中,logo_wrap的样式#logo_wrap{height: 100px;text-align: center;}

首先水平居中很简单,如果logo_wrap的宽度是未设置的(100%)的话,通过设置#logo_wrap{text-align:center;}就可以实现水平居中;

如果logo_wrap宽度是有具体的数值的话,可通过设置#logo_wrap{margin:0 auto;}来实现。

其次是垂直居中。分为三步:1.获取到当前屏幕的高度;2.获取到需要居中的div的高度;3.用屏幕的高度减去div的高度除以2就是需要给div设置的margin-top的值。

针对上边的例子的JS代码:

<script type="text/javascript">
  window.onload=function(){
  var height=document.body.scrollHeight;
  var logo_wrap=document.getElementById("logo_wrap");
  var margin_top=(height-100)/2;       //因为此div在页面中只用了一次且以后不会改变,所以写了数值,如果是不确定的,获取到高度放着这里就可以
  logo_wrap.style.marginTop=margin_top+"px";
  };
</script>

 

JS实现div动态水平垂直居中的更多相关文章

  1. css的div动态水平垂直居中

      div动态水平垂直居中,思路如下: (1)先定位.如果相对于距离最近的父元素,用absolute:如果相对于body,用fixed. (2)然后,top和left都设为50%. (3)要居中的di ...

  2. div盒子水平垂直居中方法

    文章转载自:div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居 ...

  3. div盒子水平垂直居中的方法推荐

    父盒子是position:relative 方法一:(宽高确定) div绝对定位水平垂直居中[margin 负间距], 方法二: (宽高确定) div绝对定位水平垂直居中[margin:auto实现绝 ...

  4. css3 flex 详解,可以实现div内容水平垂直居中

    先说一下flex一系列属性: 一.flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row- ...

  5. 关于div的水平垂直居中

    水平垂直居中 一.未知宽高 1. table布局(display:table) 2. 转化为行内标签display:inline-block,借助另外一个标签高度来实现 3. 绝对布局(positio ...

  6. div盒子水平垂直居中的方法

    这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居中同样的效果,也支持联合可变高度方式使用.内容块定义t ...

  7. 总结div里面水平垂直居中的实现方法

    最近经常碰到要垂直居中的问题,所以想着总结一下:关于如何设置小盒子在大盒子里面水平垂直方向同时居中的实现方法有很多种,下面仅列举了常用的几种. 首先看一下要实现的效果图及对应的html代码: < ...

  8. CSS:div/img水平垂直居中

    div水平垂直居中方法一: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  9. div 内容水平垂直居中

    对于前端布局来说.总有一些图片水平垂直居中老是不好看,影响整体美观,百度一大堆各种自适应方法,终于找到了一种比较简单,适用于所有场景的方法.. 1.对于布局来说.一个div搞定. <div id ...

随机推荐

  1. Delphi常用关键字用法详解

    本文详细介绍了Delphi中常用的各个关键字名称及用法,供大家在编程过程中借鉴参考之用.详情如下: absolute: ? 1 2 3 4 5 6 7 8 9 10 //它使得你能够创建一个新变量, ...

  2. 《java编程思想》读书笔记(二)第五章(2)

    成员初始化 Java尽力保证:所有变量在使用前都能得到恰当的初始化. 对于方法的局部变量,Java会以编译时报错的形式贯彻这种保证,比如: void f() { int i; //这里编译时就会报错, ...

  3. python操作

    用python做OI题实在不是一个明智的选择 if __name__ == "__main__":相当于c艹的int main(),然而似乎没有也可以? 重定向标准输入输出流:sy ...

  4. 依赖注入 – ASP.NET MVC 4 系列

           从 ASP.NET MVC 3.0 开始就引入了一个新概念:依赖解析器(dependence resolver).极大的增强了应用程序参与依赖注入的能力,更好的在 MVC 使用的服务和创 ...

  5. ibm v3700

    raid5总容量计算(n-1)*最小盘容量RAID0:N块盘组成,逻辑容量为N块盘容量之和:RAID1:两块盘组成,逻辑容量为一块盘容量:RAID3:N+1块盘组成,逻辑容量为N块盘容量之和:RAID ...

  6. centos安装mongodb 3.2.9

    centos 6.5 x64 1.下载地址:用迅雷下载,直接下载下不动 https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel62-3.2 ...

  7. [转]''\\=DevExpress 中 汉化包 汉化方法

    [DevExpress]DevExpress 中 汉化包 汉化方法 2016-02-17 21:13 1781人阅读 评论(0) 收藏 举报  分类: DevExpress(24)  版权声明:本文为 ...

  8. 获取tp-link中的拨号密码

    一日,公司网络巨慢,丢包非常严重,打电话给电信,说信号稳定,可能是我们的路由器有问题,让我们直接用电脑拨号 心中一闷,鬼知道拨号密码是多少,于是百度了一下,大概有以下几种方法 一.使用工具,把路由器的 ...

  9. PHP+Mysql+jQuery实现地图区域数据统计-展示数据

    我们要在地图上有限的区块内展示更多的信息,更好的办法是通过地图交互来实现.本文将给大家讲解通过鼠标滑动到地图指定省份区域,在弹出的提示框中显示对应省份的数据信息.适用于数据统计和地图区块展示等场景. ...

  10. 自动化运维web环境搭建:Nginx+Django+uwsgi

    参考资料: http://lovelace.blog.51cto.com/1028430/1600594 http://www.cnblogs.com/xiongpq/p/3381069.html 安 ...