js实现div居中

最新推荐文章于 2024-07-14 12:56:18 发布
最新推荐文章于 2024-07-14 12:56:18 发布
阅读量1.2k 收藏
点赞数 1
分类专栏： web前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TomcatLOVEMysql/article/details/51148508
版权

JS实现div居中示例

作者： 字体：[增加 减小] 类型：转载 时间：2014-04-17 我要评论

div居中的方法有很多，网上可以找得到，但是本文要介绍的是使用JS实现的，比较另类，大家不妨参考下
复制代码代码如下:

<!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> 
TomcatLOVEMysql
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
通过JavaScript使div随时居中
KongYue1202的博客
11-22 1343
学习内容： 下面就跟大家一起简单分析下JS是如何实现让DIV盒子，在页面自动居中，并且随着页面的变动，也能居中。 思路： 一、首先我们的DIV盒子模型，一般是绝对定位于浏览器的，那么首先我们可以先获取整个页面（浏览器的可视区）的宽度、高度。 二、然后获取自身DIV盒子的宽度、高度。 三、用浏览器可视区的宽度、高度，减去DIV自身的宽度，高度，然后除以2。就可以获取到DIV距离页面的top值，left值。在赋值给DIV相应的top值，left值。 四、随着我们的浏览器窗口的改变，让DIV
html基础（2）----js控制div位于正中心
lvkemitu的博客
03-18 734
通过js来控制div层位于页面垂直居中位置 一、通过 position：fixed属性 固定定位来控制div层不随着滚动条而滚动。 width 和 height 属性来设置div层的长度和高度 你要放置的图片，文字等 二、通过js程序来控制div层位于页面的垂直居中位置
JS（js）使div居中
m0_57675124的博客
06-11 2190
<!-- 使div居中 --> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #firdiv{ width: 300px; height: 300px; background-color: aquamarine; position: absolute.
通过JavaScript使Div居中
jishublog
06-24 414
通过JavaScript使Div居中 在使用Java做后台的时候，都会做到登录的页面，但是自己的页面太难看了，要居中没居中，要颜色没颜色，但是无论是怎么样都得使登录的框居中吧！以前的想法是通过CSS+Div使div居中，自己写很困难，但是现在的想法变了，通过JavaScript可以简单的使Div在页面上居中，随着网页大小的改变做出相应的改变。而且只要明白了居中的原理轻而易举的就可以实现了。 先...
JS实现div居中示例
12-10
JS实现div居中</title> <style> /*外层div居中*/ #main { position: absolute; /*极为重要*/ background-color: blue; width:400px; height:200px; /*left:50%; top:50%; margin-left:-200px; margin-...
通过JavaScript使Div居中并随网页大小改变而改变
12-12
以前的想法是通过CSS+Div使div居中，但是现在的想法变了，通过JavaScript可以简单的使Div在页面上居中，随着网页大小的改变做出相应的改变。而且只要明白了居中的原理轻而易举的就可以实现了。 先看一下居中的原理吧...
DIV始终居中的js代码
01-19
代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <... <head> <... charset=utf-8″ /> <... #show
浮动的div自适应居中显示的js代码
12-09
为了解决这个问题，我们可以利用JavaScript（通常配合jQuery库）来动态计算并调整`div`的位置，使其在任何窗口尺寸下都能居中显示。这里提到的`autoWidth()`函数就是一个典型的解决方案。 首先，我们需要获取包含...
JS实现-DIV自动居中代码
yuzhongkai的博客
03-20 6598
其实想让整个DIV盒子在页面实现自动居中非常简单，只需要一小段JS代码代码就可以实现。有时候我们做页面效果也好，做程序功能的开发也好。只要思路理清楚了，相信做起来会非常的得心应手。   下面就跟大家一起简单分析下JS是如何实现让DIV盒子，在页面自动居中，并且随着页面的变动，也能居中。 思路：       一、首先我们的DIV盒子模型，一般是绝对定位于浏览器的，那么首先我们可以先
HTMl、js中设置div的透明度(非常实用)、div居中
10-16
非常实用的页面制作，用于设置div的透明度，以及div在页面左右居中
div水平垂直居中的方法
kang_k的博客
08-01 602
div水平垂直居中的方法*方法1：使用JS实现:兼容全部的浏览器 //->获取当前屏幕的宽度和高度 var winW = document.documentElement.clientWidth || document.body.clientWidth, winH =
div内字体居中
qq_45991812的博客
06-10 7125
1》先设置一个div的宽高，使用text-align水平居中； 2》再使用line-height上下居中即可（line-height设置的高度需跟div的高度一致）。
JS 实现div 居中显示
QTFYING的博客
02-22 3664
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JS实现div居中</title> <style> /*外层div居中*/ #main { position: absolute; /*极为重要*/ background-color: blue;
JS实现div动态水平垂直居中
kellalove的专栏
12-22 9111
把id为bouncingScreen的元素整个页面居中 首先水平居中很简单； 其次是垂直居中。分为三步： 1）获取到当前屏幕的高度； 2）获取到需要居中的div的高度； 3）用屏幕的高度减去div的高度除以2就是需要给div设计的margin-top/padding-top的值。 js代买块: 　　window.onload=function(){ 　　var hBscreen
JS实现div居中显示的例子
jbxue123的专栏
04-17 708
Js实现div居中显示的方法。 代码：         JS实现div居中    /*外层div居中*/  #main {  position: absolute; /*极为重要*/  background-color: blue;  width:400px;  height:200px;  /*left:50%;  top:50%;  margin-left:-2
div居中方法（共8种）
热门推荐
qq_41425194的博客
04-25 11万+
水平居中 1.行级元素：为该行级元素的父元素设置text-align:center配合line-height样式 <div style="width: 500px;height: 100px;line-height: 100px;border: 1px solid green;text-align:center;"> <span>行级元素</span> </div> 2.块级元素：为其自身设置margin:auto样式 <div st
html中div内容居中的方法
火星男孩的分享空间
03-27 7万+
方法1：table-celldiv中的内容居中：不改变盒子尺寸。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { background-color: red; widt
Sortable.js板块拖拽示例
最新发布
w11111xxxl的博客
07-14 765
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值