JS实现div居中示例

longmeifeng 2014-04-17

代码如下：

<!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>
longmeifeng

longmeifeng

相关推荐

div内容水平垂直居中的正确玩法

<!DOCTYPE html>. text-align: center;height: 300px;border: 1px solid rebeccapurple;display: inline-block;vertical-align: mi

PioneerFan / 0评论 2020-06-10

css按钮定位在div底部

　　这种场景会经常遇到，比如头部固定，底部固定，或者侧边栏固定等，虽然很简单，但是好记性不如烂笔头，作为一个后端开发，在转全栈的路上css还是有点蛋疼的。　　如上代码便可，父级div给个定位，子级按钮再给个绝对定位就可。这里我父级div给的固定定位是结合我

e度空间 / 0评论 2020-04-30

div 内容垂直居中

<div style="width: 200px;height: 200px;border: solid red 1px;display: flex;align-items: center;">

HSdiana / 0评论 2020-03-28

不定宽高div水平垂直居中

1.块级元素：定宽 + margin:0 auto;；

IT游罠 / 0评论 2015-11-15

div实现在屏幕水平垂直居中的方法

如果你有更多更好的方法，欢迎亲们补充。

zljiaa / 0评论 2019-09-07

一个高度不固定的div，里面的文字如何垂直居中？

我也找了老半天，后来发现一个很强势的写法 简单暴力// 加在父级div中垂直居中：align-items:center; display: -webkit-flex;水平居中：justify-content:center; display: -webkit

FZfeng / 0评论 2018-04-04

css控制图片不改变原比例居中显示，图片超出div部分隐藏

<!DOCTYPEhtml>. display:flex;flex-direction:row;width:200px;height:200px;overflow:hidden;display:flex;justify-content:cent

hhhkhhh / 0评论 2017-07-20

如何使文字在div中水平和垂直居中的css代码

CSS定义字体行间距line-height:xxpx;

zhanghaibing00 / 0评论 2016-10-12

使文字在div中水平和垂直居中

text-align:center意思就是说，让这个DIV里的文字水平居中，而line-height:100px;的意思是说，让DIV里面的每一行文字，占的高度为100PX，这样，文字就垂直居中了。<div style="width:200

Ivy / 0评论 2016-08-14

css div水平居中

如何让container中的div相对于container水平居中呢?

lanzhusiyu / 0评论 2016-06-30

不定宽高div水平垂直居中

1.块级元素：定宽 + margin:0 auto;；

srchange / 0评论 2015-11-15

margin 0 auto DIV在IE中无法居中解决

让最外层DIV在IE浏览器中水平居中，除了对其设置margin:0auto外，一般还要对body设置样式，但一般高版本IE浏览器无须设置此CSS样式也能使DIV居中，低版本IE比如IE6和对标准比较严格浏览器需要设置text-align:center。有时

MrWhite0 / 0评论 2015-11-08

让图片 div居中实现代码

<!<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />. .hezc{width:200px; height

VincentDrW / 0评论 2011-08-14

如何让div中的内容垂直居中

虽然Div布局已经基本上取代了表格布局，但表格布局和Div布局仍然各有千秋，互有长处。比如表格布局中的垂直居中就是Div布局的一大弱项，不过好在千变万化的CSS可以灵活运用，可以制作出准垂直居中效果，勉强过关。要让div中的内容垂直居中，无非有以下几种方法

Dr凉 / 0评论 2015-06-10

jQuery弹出Div窗口居中显示、滚动跟随、关闭按钮以及几秒后自动消失

var screenWidth = $.width(), screenHeight = $.height(); //当前浏览器窗口的 宽高。var scrolltop = $.scrollTop();//获取当前窗口距离页面顶部高度

asdjkl / 0评论 2015-04-30

div水平垂直居中的完美解决方案

使用margin-left:auto;margin-right:auto;可以让你的div居中对齐。数字0表示上下边距是0。可以按照需要设置成不同的值。另外，让div内的内容居中的代码是：text-align:center;1,关于居中使用css为：pos

zhangpeng / 0评论 2015-03-09

页面div居中定位

在编写很多时候页面的时候我们都需要布局居中对齐的，这里引用一个小案例讲解一下水平+垂直居中对齐预期效果

覆雪蓝枫 / 0评论 2019-06-27

实现DIV层内的文字垂直居中

实际上，一个Box中由很多行很多元素组成，vertical-align只作用于在同一行内的元素，它的垂直并不是相对于整个Box而言的。因此希望那段文本对齐中间，需要给它定义一个line-height的属性，让line-height为60px，作用于一行的v

黎豆子 / 0评论 2014-12-03

CSS之div嵌套问题及高度自适应问题的五种实现--个人总结

看到过网上有类似的问题，但是大部分都是假设外层高度为100%或者是已知的，而我遇到的是外层高度虽然固定，但是我们并不知道是多少，所以也参看了网上的一些零散的解法，自己也都去实践了一下，最后总结出五种可以实现的方法。

yibawuqing / 0评论 2019-06-27

div中图片垂直居中

display: table-cell;vertical-align:middle;text-align:center;*display: block;width:200px;height:200px;border: 1px solid #eee;vert

KungLun / 0评论 2014-09-29

div css 居中 border

·IE与FF的居中方式不一样。<html><head><title>让body容器在浏览器中居中</title><linkrel="stylesheet"type="tex

编程手札 / 0评论 2014-09-18

div居中

今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align:center然后嵌套一层DIV来解决问题.可是事实上这样的方法科学吗?经过这么一番设置问题似乎解决了,在FF中已经居中了,可是在IE中看竟

wenhuadream / 0评论 2014-08-28

宽度高度不固定的div 如何水平居中以及垂直居中

html部分<div class="container"><div class="center"><a href="#">1</a><a hr

黎豆子 / 0评论 2014-04-23

IE下div使用margin0px auto不居中的原因

<divid="cnbruce">margin:0auto看看内容居中否</div>. 然后，单个div的CSS居中，非要扯上<body>？其实原理都知道，就是因为用这个“懒人”的HTML调试框，懒得

wenhuadream / 0评论 2014-04-02

实现DIV层内的文字垂直居中

实际上，一个Box中由很多行很多元素组成，vertical-align只作用于在同一行内的元素，它的垂直并不是相对于整个Box而言的。因此希望那段文本对齐中间，需要给它定义一个line-height的属性，让line-height为60px，作用于一行的v

luffot / 0评论 2014-03-07

div居中

今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align:center然后嵌套一层DIV来解决问题.可是事实上这样的方法科学吗?经过这么一番设置问题似乎解决了,在FF中已经居中了,可是在IE中看竟

张大晴 / 0评论 2014-03-02

CSS 图片水平垂直居中于DIV

对于前端工作人员，可能都会碰到要把一个图片垂直居中于一个父元素，当我们不知道它的高度时，应该如何去处理呢 ，我把我整理过的一个DEMO 上传和大家分享，有什么问题可以 互相交流和讨论。不一定来说我的方法就是最好的，如果有更好的方式 ，互相分享一下。.zxx

opspider / 0评论 2013-05-28

DIV居中

<div id="content" ><pre>现在我们要使这段文字垂直居中显示！

zhouguizhi / 0评论 2013-05-06

jquery让div居中方法

var left = ($(window).width()-498)/2;var top = ($(window).height()-206)/2+$(document).scrollTop();alert(left+" top=&quo

honeyth / 0评论 2012-11-29

div居中

虽然Div布局已经基本上取代了表格布局，但表格布局和Div布局仍然各有千秋，互有长处。比如表格布局中的垂直居中就是Div布局的一大弱项，不过好在千变万化的CSS可以灵活运用，可以制作出准垂直居中效果，勉强过关。要让div中的内容垂直居中，无非有以下几种方法

LadyZhong / 0评论 2012-11-12

关于IE8、9下DIV不居中的问题解决方案

<div id="wrap"> 在所有浏览器中都有效的方法: <pre> 在所有浏览器中都有效的方法: 在所有浏览器中都有效的方法: 在所有浏览器中都有效的方法:. </div>太烂了这种方案！这样定

Burgdan / 0评论 2012-09-16

css让DIV居中显示

#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&

福叔 / 0评论 2012-08-24

div居中可能存在的问题及解决方案

今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align:center然后嵌套一层DIV来解决问题.可是事实上这样的方法科学吗?经过这么一番设置问题似乎解决了,在FF中已经居中了,可是在IE中看竟

cssuperman / 0评论 2012-08-15

div chrome下有居中，而IE下无居中

doctype html>如果不添加这段，ie没有找到合适的解析标准就会以默认的ie5.5的方式来解析页面，在ie5.5里边，css写margin:0 auto是不管用的，盒模型的宽高计算也是错误的。

andyhu00 / 0评论 2012-06-01

css div 网页布局 左中右定宽居中

<!<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />. .out{ height:300px; width:

来老师 / 0评论 2012-05-27

css控制div绝对居中问题

<!height:100%;height:100%;width:300px;margin-right:-300px;background-color:yellow;height:100%;float:left;margin-left:300px;ba

yyNet0 / 0评论 2011-11-01

想让DIV居中 如何编写CSS

DIV居中，如何编写CSS？div居中的设置该如何编写css？我们在传统的表格布局中，只要设置表格的居中属性就实现了居中的块元素。应用div css网站布局，div的居中该如何编写css来控制它呢？body {text-align: center;}　　#

wolaizheli / 0评论 2011-10-14

使用JQuery使Div居中

Div居中是一个比较常见的需求。下面介绍一种使用JQuery使Div居中的方法。有了这样的样式定义之后就是使其居中的js代码了。var y = /2;//使用$.height()获得显示器的高，并算出相应的Div离上边的距离。obj.css.css;上面这

82483564 / 0评论 2011-06-10

解决DIV居中对齐和IE与Foxfire CSS 宽度兼容性问题

important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。*+html

startXUEBA / 0评论 2011-02-23

div居中设置

width:600px;height:210px;border:1px solid #777;text-align:center;display:table-cell;vertical-align:middle;width:0;height:100%;di

JenniferMuMu / 0评论 2011-02-15

CSS中position属性之fixed实现div居中

position 属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。其实，实现这个效果并不复杂，利用 CSS

chengxiaofeng / 0评论 2019-04-29

Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法

#bt{border: 2px solid #000;background-color: #ccc;cursor: pointer;padding: 2px 5px;}. .orderMsg dl dd.cBtn a:link,.orderMsg dl d

eboyhaining / 0评论 2013-08-08

通过JavaScript使Div居中并随网页大小改变而改变

以前的想法是通过CSS+Div使div居中，但是现在的想法变了，通过JavaScript可以简单的使Div在页面上居中，随着网页大小的改变做出相应的改变。

courseware / 0评论 2013-06-24

jquery div 居中技巧应用介绍

$.css; short version: [html] 代码如下：。withScrolling:true, // booleen, take care of the scrollbar

CeiWCJ / 0评论 2012-11-24

基于jQuery实现的水平和垂直居中的div窗口

} 2、通过css实现水平居中和垂直居中 通过css创建一个水平居中和垂直居中的div是一件比较麻烦的事情，您必须事先知道另外一个div的尺寸： 代码如下：。$.resize(); 这种方法的好处是您无需知道div有多大，缺点是它只能通过JavaScrip

melissahexiu / 0评论 2011-08-08

DIV浮动定位实现CSS分栏布局

第二种则是使用CSS中的DIV浮动定位概念。DIV绝对定位或DIV浮动定位都能够用来实现分栏效果。二者可以独立使用，也可以结合在一起，相辅相成。DIV浮动定位的本意是要将插入到文章中的图片向左或者向右浮动，使图片下方的文字自动环绕在它的周围，使图片的左边或

cuteyDan / 0评论 2010-09-14

CSS布局中DIV绝对定位语法

CSS布局中实现分栏布局有两种方法。第二种则是使用CSS中的浮动概念。DIV绝对定位或浮动都能够用来实现分栏效果。二者可以独立使用，也可以结合在一起，相辅相成，这里重点说明一下DIV绝对定位的用法。DIV绝对定位的优势在于，我们可以丝毫不差地精确控制任何元

hitris / 0评论 2010-09-14

CSS解决DIV居中相关问题

这样在FF中已经居中了,可是在IE中看还是没有居中!解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT:auto;MARGIN-LEFT:auto;”关键就是最后的center,这个参数定义图片的位置。

Ladyseven / 0评论 2010-09-10

DIV和CSS实现页面水平居中技巧

在Web标准中的页面布局是使用DIV配合CSS来实现的。这其中最常用到的就是使整个页面水平居中的效果，这是在页面布局中基本，也是最应该首先掌握的知识。不过，还是经常会有人问到这个问题，在这里我简单总结一下使用DIV和CSS实现页面水平居中的方法：。在现代浏

林一天 / 0评论 2010-09-09