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 相关文章推荐
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
Mar 20 Javascript
node中socket.io的事件使用详解
Dec 15 Javascript
JavaScript内存管理介绍
Mar 13 Javascript
jquery实现select下拉框美化特效代码分享
Aug 18 Javascript
图解Sublime Text3使用技巧
Dec 21 Javascript
jQuery下拉框的简单应用
Jun 24 Javascript
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
vue基于Vue2.0和高德地图的地图组件实例
Apr 28 Javascript
JavaScript实现简单生成随机颜色的方法
Sep 21 Javascript
jquery实现企业定位式导航效果
Jan 01 jQuery
vue history 模式打包部署在域名的二级目录的配置指南
Jul 02 Javascript
微信小程序利用for循环解决内容变更问题
Mar 05 Javascript
淘宝网提供的国内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解压文件代码实现php在线解压
2014/02/13 PHP
php判断当前操作系统类型
2015/10/28 PHP
PHP对称加密函数实现数据的加密解密
2016/10/27 PHP
PHP实现的日历功能示例
2018/09/01 PHP
PHP后台备份MySQL数据库的源码实例
2019/03/18 PHP
Javascript select下拉框操作常用方法
2009/11/09 Javascript
Dom操作之兼容技巧分享
2011/09/20 Javascript
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
2014/09/25 Javascript
javascript数据类型验证方法
2015/12/31 Javascript
AngularJS基础 ng-mousemove 指令简单示例
2016/08/02 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
2017/01/15 Javascript
原生js实现验证码功能
2017/03/16 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
详解从Vue-router到html5的pushState
2018/07/21 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
2018/09/20 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
2019/09/06 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
JS代码检查工具ESLint介绍与使用方法
2020/02/04 Javascript
js实现简单的点名器随机色实例代码
2020/09/20 Javascript
Python2.x版本中基本的中文编码问题解决
2015/10/12 Python
Python控制多进程与多线程并发数总结
2016/10/26 Python
如何安装多版本python python2和python3共存以及pip共存
2018/09/18 Python
NLTK 3.2.4 环境搭建教程
2018/09/19 Python
Python创建或生成列表的操作方法
2019/06/19 Python
Python astype(np.float)函数使用方法解析
2020/06/08 Python
Fox Racing英国官网:越野摩托车和山地自行车服装
2020/02/26 全球购物
面向对象编程OOP的优点
2013/01/22 面试题
港湾网络笔试题
2014/04/19 面试题
太行山上观后感
2015/06/05 职场文书
指导老师鉴定意见
2015/06/05 职场文书
《吃水不忘挖井人》教学反思
2016/02/22 职场文书
浅谈Python数学建模之固定费用问题
2021/06/23 Python