CSS中怎么讓DIV居中

主要css代碼有兩個：

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：國際域名空間、虛擬主機、營銷軟件、網(wǎng)站建設、呼圖壁網(wǎng)站維護、網(wǎng)站推廣。

1,text-align:center

2,margin:0 auto；

其兩個樣式需要配合使用才能實現(xiàn)div盒子的居中顯示排版。

首先我們對body設置text-align:center，再對需要居中的div盒子設置css樣式margin:0 auto，這樣即可讓對應div水平居中。

舉個例子，居中代碼為：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

titleCSS使div居中制作/title

style

body{ text-align:center}

#nav{ margin:0 auto; width:200px; height:150px; border:5px double #FF0066;}

/* css注釋：為了觀察效果設置寬度 ?高度 邊框等樣式 */

/style

/head

body

div id="nav"

DIV居中

/div

/body

/html

為了觀察div居中效果，我們對div設置一個div命名為“#div”在html中div標簽內使用id=“nav”,設置其寬度為200px;高度為150px，邊框也設置了顏色。

效果如圖：

以上就是CSS讓DIV居中的方法。

如何讓一個div居中 CSS怎樣讓一個div居中

1、新建一個html文件，命名為test.html，用于講解CSS怎樣讓一個div居中。

2、在test.html文件中，使用div標簽創(chuàng)建一個模塊，用于測試居中效果。

3、在test.html文件中，設置div的class屬性為test，下面將通過該class屬性設置其css樣式。

4、在test.html文件內，編寫styletype=text/css/style標簽，頁面的css樣式將寫在該標簽內。

5、在css標簽中，對div進行樣式設置，使用width屬性設置div的寬度為400px，使用height屬性設置div的寬度為200px，使用background屬性設置div的背景顏色為灰色。

6、在css標簽中，使用margin屬性對div的外邊距進行設置，兩邊的外邊距設置為auto，便可實現(xiàn)div居中效果。

7、在瀏覽器打開test.html文件，查看實現(xiàn)的效果。

CSS div居中的幾種方法

CSS實現(xiàn)div垂直居中的方法有很多，下面div居中的幾種方法是自己平時寫網(wǎng)頁中經(jīng)常用到的，最常見的例子就是登錄注冊彈出框。

方法一：對div使用絕對布局position:absolute;并設置top，left，right，bottom的值相等，但不一定都等于0；并且設置margin:auto。

方法二：這個方法要知道div的寬度和高度。對div使用絕對布局position:absolute;并把top和left的值都設置為50%；50%就是指頁面窗口的寬度和高度的50%；最后將div左移和上移，左移和上移的大小為div寬度和高度的一半。

其中 margin-left：-100px 和 margin-top：-100px 可以寫成 margin：-100px ?0px ?0px ?-100px

方法三：div使用絕對定位position：absolute，并且設置left和top的值都為50%。使用css3的transform屬性。transform：translate（-50%，-50%）。

以上3種方法的效果如下顯示

若有兩個div，里面小的div相對于外面大的div水平垂直居中對齊，有以下幾種方法。

方法一：利用position和margin：auto實現(xiàn)。父元素設置position：relative；子元素設置position：absolute，并設置top，left，right，bottom值相等。

方法二：使用position。父元素設置position：relative；子元素設置position：absolute。并設置top和left為50%，并設置左移和上移為子元素的大小的一半。

方法三：使用display：flex。這種方法需要設置瀏覽器的兼容性。

方法四：使用transform：translate（）。父元素設置position：relative；子元素設置position：absolute。并設置top和left為50%。最后設置transform：translate（-50%，-50%）。

以上四種方法的效果圖如下顯示

今天就跟大家分享這么多~如果你有更好的方法，請在下方留言