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 相关文章推荐
JavaScrip实现PHP print_r的数功能(三种方法)
Nov 12 Javascript
jQuery制作仿Mac Lion OS滚动条效果
Feb 10 Javascript
jQuery插件zTree实现获取一级节点数据的方法
Mar 08 Javascript
angularJs中datatable实现代码
Jun 03 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
Dec 24 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
Feb 09 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
Mar 19 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
Apr 19 Javascript
js操作table中tr的顺序实现上移下移一行的效果
Nov 22 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
Mar 28 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
Mar 04 Javascript
Vue过滤器(filter)实现及应用场景详解
Jun 15 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统计时间和内存使用情况示例分享
2014/03/13 PHP
php实现httpclient类示例
2014/04/08 PHP
PHP生成二维码的两个方法和实例
2014/07/01 PHP
yii操作session实例简介
2014/07/31 PHP
PHP中feof()函数实例测试
2014/08/23 PHP
一个PHP实现的轻量级简单爬虫
2015/07/08 PHP
php使用imagecopymerge()函数创建半透明水印
2018/01/25 PHP
基于ThinkPHP删除目录及目录文件函数
2020/10/28 PHP
JQuery优缺点分析说明
2010/06/09 Javascript
jQuery.each()用法分享
2012/07/31 Javascript
JS预览图像将本地图片显示到浏览器上
2013/08/25 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
深入剖析Node.js cluster模块
2018/05/23 Javascript
ES6顶层对象、global对象实例分析
2019/06/14 Javascript
layui 解决富文本框form表单提交为空的问题
2019/10/26 Javascript
vue-cli创建的项目中的gitHooks原理解析
2020/02/14 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
Python MD5文件生成码
2009/01/12 Python
python中global与nonlocal比较
2014/11/21 Python
使用Python脚本对Linux服务器进行监控的教程
2015/04/02 Python
Python实现的数据结构与算法之双端队列详解
2015/04/22 Python
python把1变成01的步骤总结
2019/02/27 Python
对python特殊函数 __call__()的使用详解
2019/07/02 Python
Python 给定的经纬度标注在地图上的实现方法
2019/07/05 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
2014中学教师节广播稿
2014/09/10 职场文书
2014收银员工作总结范文
2014/12/16 职场文书
出生公证书
2015/01/23 职场文书
公证书格式
2015/01/23 职场文书
关于元旦的广播稿2016
2015/12/17 职场文书
详解CocosCreator消息分发机制
2021/04/16 Javascript
MySQL删除和插入数据很慢的问题解决
2021/06/03 MySQL
SQL Server使用PIVOT与unPIVOT实现行列转换
2022/05/25 SQL Server