1.新建一個html文件，命名為test.html，用於講解利用CSS怎麼讓文字居中。

2.在test.html文件內，使用div標籤創建一個模塊，並設置其class屬性為bob，下面將通過該class設置其css樣式。

3.在test.html文件內，在div標籤內，使用p標籤創建一行文字，下面將利用CSS讓文字居中。

4+在test.html文件內，編寫<style type="text/css"></style>標籤，頁面的css樣式將寫在該標籤內。

5.在css標籤內，對類名為bob的div進行樣式設置，定義其寬度為300px，高度為30px，背景顏色為紅色。

6.在css標籤內，對p元素進行樣式設置，使用text-align屬性設置文字居中（center），文字顏色為白色。

7.在瀏覽器打開test.html文件，查看實現的效果。

第一種方式：設置body 居中。在CSS中的代碼是（body{text-align:center;}）第二種方式：用盒子模型，首先設置一個Div ，這個DIV的寬度為100%，然後在這個DIV居中，那麼在這個DIV中加的內容就居中顯示，代碼如下：<div ><div ></div></div>CSS 樣式代碼：<style type="text/css">.div1{text-align:center;width:100%;}.div2{width:980px;background:red;} //為了看清效果，加了背景顏色</style>第三種方式：margin：0 auto；

通常的方法為：先設置div的寬度，然後使用如下樣式：

1margin: 10px auto; /* 上下邊距10px，左右邊距自動以達到左右居中的目的*/

以下為示例：

HTML代碼中給出div

123 <div > <div ></div></div>

添加樣式

1234567 /*外層邊框*/div.outer{width:200px;height:150px;border:1px solid green;}div.content{ width:100px;height:50px; /*設置大小*/ margin:20px auto; /*設置左右邊距自動以使其居中*/ border:1px solid red;}

顯示效果