Jquery让div居中,让div在div中居中

jquery如何让div居中

方法很多，一般而言是用align="center"，另外还可以微调(不过不建议你用)。

成都创新互联致力于网站设计制作、网站制作,成都网站设计,集团网站建设等服务标准化，推过标准化降低中小企业的建站的成本，并持续提升建站的定制化服务水平进行质量交付，让企业网站从市场竞争中脱颖而出。 选择成都创新互联，就选择了安全、稳定、美观的网站建设服务！

你把你的页面代码给出来吧，我直接更改，你可以直接用，这样方便

不明白请追问，如果对你有帮助，记得采纳~

我想实现DIV在body中水平竖直都居中显示，下面代码看似没问题，不过达不到预期。。

你的代码我看了，如果你的div想要静态居中，那代码里的css显然不能满足，因为你的div的top和left都是设置50%，这是div的顶点位置，定位方式还是absolute，显然是不可能居中的。

不过看你下面写的函数，你是想让div动态居中是吧？代码本身没问题，可是你忘了调用这个函数了，呵呵~~~~

你在body标签里加上“onload='cent()'”，在浏览器加载完页面之后调用这个函数，你的div就居中了。代码：

html

head

title标题文档/title

style

body{

background-color:#666;

height:800px;

width:1000px;

}

#two{

background-color:#09c;

height:200px;

width:400px;

position:absolute;

top:50%;

left:50%;

}

/style

/head

body onload="cent()"

div id="two"

1111111

/div

script type="text/javascript"

function cent()

{

var two=document.getElementById("two");

var two2=two.offsetHeight;

var two3=two.offsetWidth;

two.style.marginTop=-two2/2;

two.style.marginLeft=-two3/2;

}

/script

/body

/html

怎样用css只让div中的图片居中？

1、打开在线写前端代码的网站如jsrun或者jsfiddle。

目2、标是做一个如图所示的效果，不同大小的图片。

3、每个方框的html 如下，

div

span

img src='图片地址'

/img

/span

/div

4、css如下，其中需要注意的是，不要设置最外层div的大小，只设置span的大小，让span的大小决定div的大小。

其中

display: table-cell;

text-align: center;

vertical-align: middle;

这3行决定居中效果。

其中

img {

max-width: 100%;

max-height: 100%;

}

的目的是让图片可以缩放而比例不变。

div {

float:left;

margin:5px;

padding:5px;

border:1px solid #000;

}

span {

font-size: 0;

width: 150px;

height: 150px;

display: table-cell;

text-align: center;

vertical-align: middle;

}

img {

max-width: 100%;

max-height: 100%;

}

5、效果如下，很好的实现居中。

6、上面是div为float的情况

div如果是absolute或fixed也可以正常表现。

只有一个div的情况下，代码如下

div

span

img src='图片地址'

/img

/span

/div

div {

margin:5px;

padding:5px;

border:1px solid #000;

position: absolute;

left:100px;

top:100px;

}

span {

font-size: 0;

width: 150px;

height: 150px;

display: table-cell;

text-align: center;

vertical-align: middle;

}

img {

max-width: 100%;

max-height: 100%;

}

7、这张图片仍然是居中的，没有收到父容器的影响。

怎样才能将div里面的div居中呢？

div里面的div居中方法：

一条件：

这个时候对“body”设置css内容居中样式（text-align:center）

即CSS代码：

body{text-align:center}

一 设置：

这个时候对“#divcss”设置居中必备样式css margin

即CSS代码：

#divcss5{margin:0 auto}

二、DIV居中用法实例

为了便于观察布局居中效果，我们再对“#divcss5”加一个css边框为黑色，css宽度为300px;高度为100px样式。

1、最终得到DIV居中的CSS代码：

body{ text-align:center} 

#divcss{margin:0 auto;border:1px solid #000;width:300px;height:100px}

2、对应html代码片段：

div id="divcss"DIV水平居中案例/div

3、居中案例截图

4、在线演示：

三、布局居中总结

布局居中我们需要对对象加margin:0 auto样式，当然如果不加有的浏览器会实现居中效果，但有的浏览器就不会默认是居中。为了div居中兼容各大浏览器，一定遵循以上教程方法与实施教程。

css div 将div设置成position：absolute，宽度不定，如何居中呢

可以使用css的margin标签实现宽度不定，居中显示。

具体步骤如下：

需要准备的材料分别是：电脑、浏览器、ultraedit。

1、在ue编辑器中新建一个空白的html文件，css文件。

2、在ue编辑器中输入以下html代码。

3、在ue编辑器中输入以下css代码。

4、编辑完成以后，在ue编辑器中点击保存，格式选择UTF8无BOM。

5、在浏览器中打开此html文件，可以看到最终想要实现的宽度不定，水平居中显示效果。

jQuery怎么将div设置为水平垂直居中

jQuery如何将div设置为水平垂直居中

jQuery如何将div设置为水平垂直居中:

使用CSS也可以实现div的水平垂直居中效果，但是有时候可能需要动态的调整，下面就介绍一下如何用jQuery实现对象的水平垂直居中效果，先看一段代码实例:

!DOCTYPE html

html

head

meta charset="utf-8"

meta name="author" content="" /

title蚂蚁部落/title

style type="text/css"

.mytest{

width:200px;

height:100px;

background-color:green;

}

/style

script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"/script

script type="text/javascript"

$(document).ready(function(){

$(window).resize(function(){

$(".mytest").css({

position:'absolute',

left:($(window).width() - $(".mytest").outerWidth())/2,

top:($(window).height() - $(".mytest").outerHeight())/2 + $(document).scrollTop()

});

});

$(window).resize();

})

/script

/head

body

div class="mytest"/div

/body

/html

以上代码实现了将div在窗口中水平垂直居中效果，无论是否调整窗口大小。可能有些朋友会说，这个是在窗口中垂直居中的，如何实现一个div在一个普通的福对象中垂直居中，代码修改如下:

!DOCTYPE html

html

head

meta charset="utf-8"

meta name="author" content="" /

title蚂蚁部落/title

style type="text/css"

.parent{

width:500px;

height:500px;

background-color:red;

}

.children{

width:200px;

height:100px;

background-color:green;

}

/style

script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"/script

script type="text/javascript"

$(document).ready(function(){

$(window).resize(function(){

$(".children").css({

position:'absolute',

left:($(".parent").width() - $(".children").outerWidth())/2,

top:($(".parent").height() - $(".children").outerHeight())/2 + $(document).scrollTop()

});

});

$(window).resize();

})

/script

/head

body

div class="parent"

div class="children"/div

/div

/body

/html

以上代码实现了字div在父div中的水平垂直居中效果。