jquery如何讓div居中

方法很多，一般而言是用align="center"，另外還可以微調(diào)(不過不建議你用)。

成都創(chuàng)新互聯(lián)致力于網(wǎng)站設(shè)計制作、網(wǎng)站制作,成都網(wǎng)站設(shè)計,集團網(wǎng)站建設(shè)等服務(wù)標準化，推過標準化降低中小企業(yè)的建站的成本，并持續(xù)提升建站的定制化服務(wù)水平進行質(zhì)量交付，讓企業(yè)網(wǎng)站從市場競爭中脫穎而出。 選擇成都創(chuàng)新互聯(lián)，就選擇了安全、穩(wěn)定、美觀的網(wǎng)站建設(shè)服務(wù)！

你把你的頁面代碼給出來吧，我直接更改，你可以直接用，這樣方便

不明白請追問，如果對你有幫助，記得采納~

我想實現(xiàn)DIV在body中水平豎直都居中顯示，下面代碼看似沒問題，不過達不到預(yù)期。。

你的代碼我看了，如果你的div想要靜態(tài)居中，那代碼里的css顯然不能滿足，因為你的div的top和left都是設(shè)置50%，這是div的頂點位置，定位方式還是absolute，顯然是不可能居中的。

不過看你下面寫的函數(shù)，你是想讓div動態(tài)居中是吧？代碼本身沒問題，可是你忘了調(diào)用這個函數(shù)了，呵呵~~~~

你在body標簽里加上“onload='cent()'”，在瀏覽器加載完頁面之后調(diào)用這個函數(shù)，你的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、打開在線寫前端代碼的網(wǎng)站如jsrun或者jsfiddle。

目2、標是做一個如圖所示的效果，不同大小的圖片。

3、每個方框的html 如下，

div

span

img src='圖片地址'

/img

/span

/div

4、css如下，其中需要注意的是，不要設(shè)置最外層div的大小，只設(shè)置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、效果如下，很好的實現(xiàn)居中。

6、上面是div為float的情況

div如果是absolute或fixed也可以正常表現(xiàn)。

只有一個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居中方法：

一條件：

這個時候?qū)Α癰ody”設(shè)置css內(nèi)容居中樣式（text-align:center）

即CSS代碼：

body{text-align:center}

一 設(shè)置：

這個時候?qū)Α?divcss”設(shè)置居中必備樣式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、對應(yīng)html代碼片段：

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

3、居中案例截圖

4、在線演示：

三、布局居中總結(jié)

布局居中我們需要對對象加margin:0 auto樣式，當(dāng)然如果不加有的瀏覽器會實現(xiàn)居中效果，但有的瀏覽器就不會默認是居中。為了div居中兼容各大瀏覽器，一定遵循以上教程方法與實施教程。

css div 將div設(shè)置成position：absolute，寬度不定，如何居中呢

可以使用css的margin標簽實現(xiàn)寬度不定，居中顯示。

具體步驟如下：

需要準備的材料分別是：電腦、瀏覽器、ultraedit。

1、在ue編輯器中新建一個空白的html文件，css文件。

2、在ue編輯器中輸入以下html代碼。

3、在ue編輯器中輸入以下css代碼。

4、編輯完成以后，在ue編輯器中點擊保存，格式選擇UTF8無BOM。

5、在瀏覽器中打開此html文件，可以看到最終想要實現(xiàn)的寬度不定，水平居中顯示效果。

jQuery怎么將div設(shè)置為水平垂直居中

jQuery如何將div設(shè)置為水平垂直居中

jQuery如何將div設(shè)置為水平垂直居中:

使用CSS也可以實現(xiàn)div的水平垂直居中效果，但是有時候可能需要動態(tài)的調(diào)整，下面就介紹一下如何用jQuery實現(xiàn)對象的水平垂直居中效果，先看一段代碼實例:

!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

以上代碼實現(xiàn)了將div在窗口中水平垂直居中效果，無論是否調(diào)整窗口大小?？赡苡行┡笥褧f，這個是在窗口中垂直居中的，如何實現(xiàn)一個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

以上代碼實現(xiàn)了字div在父div中的水平垂直居中效果。