java中前台實現div居中（html div頁面居中）

本文目錄一覽：

• 1、如何設置一個div塊級元素水平居中？
• 2、如何使DIV中的內容居中
• 3、怎麼讓div居中顯示
• 4、怎麼讓一個DIV絕對定位到頁面的正中間
• 5、jsp中 怎樣把div居中

如何設置一個div塊級元素水平居中？

1、主要的核心思想就是給div設置margin:0 auto ,這樣就能居中 。

2、下面是實現   div塊級元素水平居中 的代碼 ：（在下面的代碼 我的div 寬度200px 高度40px  背景顏色是藍色  文字水平居中） 其實沒什麼特別好解釋的 就是一個樣式，是因為百度高質量的回答  我把很簡單的問題再解釋了一遍，

!DOCTYPE html

html

head

meta charset=”utf-8″

titlediv在頁面居中/title

style

div{ width:200px;

height:40px;

background:blue;

text-align:center;

line-height:40px;

margin:0 auto ;

}

/style

/head

body

div我是一個div 我現在要居中/div

/body

/html

DIV簡介：

DIV是層疊樣式表中的定位技術，全稱DIVision，即為劃分。有時可以稱其為圖層。DIV在編程中又叫做整除，即只得商的整數。 DIV元素是用來為HTML(標準通用標記語言下的一個應用)文檔內大塊(block-level)的內容提供結構和背景的元素。

定義

div 可定義文檔中的分區或節(division/section)。

div 標籤可以把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具，並且不使用任何格式與其關聯。

如果用 id 或 class 來標記 div，那麼該標籤的作用會變得更加有效。

注釋:div 是一個塊級元素，也就是說，瀏覽器通常會在 div 元素前後放置一個換行符。

提示:請使用 div 元素來組合塊級元素，這樣就可以使用樣式對它們進行格式化。

如何使DIV中的內容居中

CSS中設置文字右對齊可以通過代碼：p align=”對齊方式”文本段落/p來實現，操作步驟如下：

1.新建一個html文檔，如下圖紅框所示；

2.可以給文檔改個名字，如下圖紅框所示；

3.然後在body和/body之間輸入文字內容，如下圖紅框所示；

4.進一步設置以下文字的對齊方式，示例代碼如下：p align=”center”孔雀為什麼要東南飛？/p；

5.在瀏覽器中預覽，文字就實現了右對齊，如下圖紅框所示；

怎麼讓div居中顯示

div居中可以用外邊距margin屬性來實現。 1、新建html文檔，在body標籤中添加div標籤，標籤的id為“header”，這時因為div標籤中沒有內容且沒有設置樣式，所以網頁中顯示空白： 2、這時為div標籤設置原題中的css樣式，此時雖然div盒子顯示了，但是沒有居中： 3、此時為div添加一個“margin: 0 auto”屬性就會居中顯示，“margin”指的是div標籤的外邊距，“0”指的是div標籤上下的外邊距，“auto”指的是div標籤左右的外邊距，並且會根據瀏覽器窗口大小自動居中，這時就是完整的html和css代碼：首先我們對body設置text-align:center，再對需要居中的div盒子設置css樣式margin:0 auto，這樣即可讓對應div水平居中。 實例講解div居中代碼應用，為了觀察div居中效果，我們對div設置一個div命名為“.div”在html中div標籤內使用class=“div”,設置其寬度為400px;高度為100px，邊框為紅色。以便我們觀察效果。

層垂直居中於瀏覽器，一直是新手朋友比較頭疼的問題。 其實解決的思路是這樣的：首們需要position:absolute;絕對定位。而層的定位點，使用外補丁margin負值的方法。負值的大小為層自身寬度高度除以二。 如：一個層寬度是400，高度是300。使用絕對定位距離上部與左部都設置成50%。而margin-top的值為－150。margin-left的值為－200。這樣我們就實現了層垂直居中於瀏覽器的樣式編寫。

怎麼讓一個DIV絕對定位到頁面的正中間

1、首先，新建一個html文件。

2、在html文件上找body標籤，在body標籤中創建div標籤並設置class類：

div

fixed浮動居中

/div

3、對div設置基本屬性。html文件找到title標籤，在這個標籤後新建一個style標籤，然後在style標籤里設置class類為fixed的屬性為：寬為300像素，高為150像素，背景為紅色，相對於瀏覽器窗口定位，距離瀏覽器頂部位置為20%。樣式代碼：

style

.fixed{

width: 300px;

height: 150px;

background-color: red;

position: fixed;

top: 20%;

}

/style

4、查看樣式效果，保存html文件後使用瀏覽器查看設置的效果。

5、設置position:fixed 居中。為了給div自動居中顯示，只需要在fixed類中再添加：

left: 0;

right: 0;

margin:0 auto;

6、查看居中效果。保存html文件後使用瀏覽器打開，就絕對居中了。

jsp中 怎樣把div居中

這並不是換到jsp頁面中就不能居中，而是您jsp頁面中缺少了第一行代碼，對頁面進行聲明，它是屬於xhtml，而不是html.

你把jsp中的 !DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”這句，換成下面這個，margin:0 auto 就自然生效了，不信，可以試試哦。

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

方法2：不用更改上面的代碼，只需在最外面的div的style中寫

div style=”border: 1px solid red; height: 200px; width: 760px; position: absolute; left:50%; margin-left: -380px; top: 50%; margin-top: -100px;”

/div

就能實現水平，垂直居中，是不是超簡單？？？

有用就 記得回來頂一下 ！！！