JS实现div居中示例


Posted in Javascript onApril 17, 2014
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>JS实现div居中</title> 
<style> 
/*外层div居中*/ 
#main { 
position: absolute; /*极为重要*/ 
background-color: blue; 
width:400px; 
height:200px; 
/*left:50%; 
top:50%; 
margin-left:-200px; 
margin-top:-100px;*/ 
border:1px solid #00F; 
} #content { 
position: absolute; /*极为重要*/ 
background-color: yellow; 
width: 200px; 
height: 100px; 
/*left:50%; 
top:50%; 
margin-left:-100px; 
margin-top:-50px;*/ 
/*div内部文字居中*/ 
text-align: center; 
line-height:100px; /*行间距和div宽度相同*/ 
} 
</style> 
<body> 
<div id="main"> 
<div id="content"> 
Sun 
</div> 
</div> 
<script type="text/javascript"> 
window.onload = function() { 
// 获取浏览器窗口 
var windowScreen = document.documentElement; 
// 获取main的div元素 
var main_div = document.getElementById("main"); 
// 通过窗口宽高和div宽高计算位置 
var main_left = (windowScreen.clientWidth - main_div.clientWidth)/2 + "px"; 
var main_top = (windowScreen.clientHeight - main_div.clientHeight)/2 + "px"; 
// 位置赋值 
main_div.style.left = main_left; 
main_div.style.top = main_top; 
// 获取mcontent的div元素 
var content_div = document.getElementById("content"); 
var content_left = (main_div.clientWidth - content_div.clientWidth)/2 + "px"; 
var content_top = (main_div.clientHeight - content_div.clientHeight)/2 + "px"; 
content_div.style.left = content_left; 
content_div.style.top = content_top; 
} 
</script> 
</body> 
</html>
Javascript 相关文章推荐
JS解析XML的实现代码
Nov 12 Javascript
JavaScript学习笔记(十七)js 优化
Feb 04 Javascript
基于jQuery试卷自动排版系统
Jul 18 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
Jan 15 Javascript
很棒的js Tab选项卡切换效果
Aug 30 Javascript
JS实现浏览器打印、打印预览示例
Feb 28 Javascript
详解Node 定时器
Feb 26 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
Jul 18 Javascript
基于vue实现web端超大数据量表格的卡顿解决
Apr 02 Javascript
JavaScript实现拖拽效果
Mar 16 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 03 Javascript
vue常用高阶函数及综合实例
Feb 25 Vue.js
淘宝网提供的国内NPM镜像简介和使用方法
Apr 17 #Javascript
js调用后台、后台调用前台等方法总结
Apr 17 #Javascript
JS下载文件|无刷新下载文件示例代码
Apr 17 #Javascript
你可能不知道的JavaScript的new Function()方法
Apr 17 #Javascript
在JS中解析HTML字符串示例代码
Apr 16 #Javascript
iframe的onreadystatechange事件在firefox下的使用
Apr 16 #Javascript
javascript打开word文档的方法
Apr 16 #Javascript
You might like
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
php生成图片验证码的实例讲解
2015/08/03 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
javascript Zifa FormValid 0.1表单验证 代码打包下载
2007/06/08 Javascript
js或css文件后面跟参数的原因说明
2010/01/09 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
2010/12/28 Javascript
JS复制到剪贴板示例代码
2013/10/30 Javascript
jQuery操作DOM之获取表单控件的值
2015/01/23 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
2015/10/21 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
2015/10/21 Javascript
js+html制作简单验证码
2017/02/16 Javascript
vue.js全局API之nextTick全面解析
2017/07/07 Javascript
浅谈vue项目重构技术要点和总结
2018/01/23 Javascript
vue实现2048小游戏功能思路详解
2018/05/09 Javascript
JavaScript之实现一个简单的Vue示例
2019/01/17 Javascript
JQuery常见节点操作实例分析
2019/05/15 jQuery
JavaScript文档加载模式以及元素获取
2020/07/28 Javascript
element中Steps步骤条和Tabs标签页关联的解决
2020/12/08 Javascript
[00:57]深扒TI7聊天轮盘语音出处5
2017/05/11 DOTA
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
一些常用的Python爬虫技巧汇总
2016/09/28 Python
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
python selenium实现发送带附件的邮件代码实例
2019/12/10 Python
Python坐标轴操作及设置代码实例
2020/06/04 Python
Python Spyder 调出缩进对齐线的操作
2021/02/26 Python
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
屈臣氏俄罗斯在线商店:Watsons俄罗斯
2020/08/03 全球购物
外包公司软件测试工程师
2014/11/01 面试题
工商企业管理应届生求职信
2014/05/04 职场文书
低碳日宣传活动总结
2014/07/09 职场文书
幼师中班个人总结
2015/02/12 职场文书
消费者理赔投诉书
2015/07/02 职场文书