div垂直居中(js)

window.onload = function(){
            var xx = document.documentElement.clientHeight;
            // 470为要垂直居中的div的高度
            he = (xx-470)/2;
            console.log(he);
            document.getElementsByClassName(‘weixin_public‘)[0].style.marginTop = he + ‘px‘;

        }

通过以上的js控制即可达到垂直居中的效果

时间: 2024-10-05 17:58:40

div垂直居中(js)的相关文章

如何让未知高度div垂直居中

如何让未知高度div垂直居中:让div垂直居中对齐方法有多种多样,可以使用CSS让div在父元素中垂直居中,但是如果在不知道div高度的情况下将其在父元素中实现它的垂直居中对齐有难度,因为涉及到浏览器兼容性,下面就介绍一下通过js让未知高度的div在父元素中垂直居中,代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/htm

div垂直居中 css div盒子上下垂直居中

div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div css让这个登录布局水平和css垂直居中. 这里介绍一种最简单兼容性最好的水平居中与上下垂直居中的方法. 1.具体实例代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> &

DIV+CSS+JS仿Select下拉表单网页特效源代码下载

DIV+CSS+JS仿Select下拉表单 原文:DIV+CSS+JS仿Select下拉表单网页特效源代码下载 源代码下载地址:http://www.zuidaima.com/share/1550463331830784.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <

div垂直居中

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>上下垂直居中 在线演示 DIVCSS5</title> <style> #main {position: absolute;width:400px;height:200px;left:50%;top:50%; margin-left:-200px;margin-top:-100px

商品产品列表分类可右侧展开详细分类DIV+CSS+JS特效(http://www.divcss5.com/css-texiao/texiao746.shtml)

仿京东.当当等大型网站商品分类.产品分类展开菜单,鼠标移动对应分类上右侧展开更详细分类特效,此分类特效采用DIV+CSS+JS实现兼容各大浏览器,可任意更改,简单大方. 商品分类右侧展开更详细特效截图 鼠标放到商品分类上背景变色.加边框,同时右侧对应显示更详细的分类内容.可用于商品分类.产品分类的详细分类展开隐藏. 本分类特效菜单采用DIV CSS布局. 在线演示:

css的div垂直居中的方法,百分比div垂直居中

我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些div如何垂直居中呢?这篇文章,我总结一下. 固定高宽div垂直居中 如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50%; width:200px; height:100px; margin-left:-100px; margin-top:-

兼容各个浏览器的未知高度div垂直居中效果

兼容各个浏览器的未知高度div垂直居中效果:让div垂直居中与它的父对象中,并不像是让div在父元素中水平居中那么简单,只要简单的为此元素设置margin:0px auto即可,虽然将一些属性配合使用也可以将div垂直居中与父元素中,但是在某些浏览器中并不兼容,下面就介绍一种兼容各大浏览器的方式.先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta

简易DIV垂直居中阴影层笼罩JS实现

$(document).ready(init); function init() { var h = $(window).height(); var w = $(window).width(); /* *@param 传相应Id *@description 显示相应ID内容 同时加上阴影层 点击阴影层隐藏 点击内容项不隐藏 */ function show(id) { var _this = $('#'+ id); _this.wrap('<div id=\'blackBg\' style=\'

CSS教程:div垂直居中的N种方法[转]

在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生 效,例如表格元素中的<td>.<th>.<caption>等,而像<div>.<span>这样的元素是没有valign特性的,因此使用vertic