1、新建一個html文檔，可以用任何文本編輯器，這里演示用Dreamweaver軟件，新建并保存html文檔。

2、然后寫html代碼，寫一個input文本輸入框id為inputId，然后寫一個按鈕，id為buttonId，這里要做的是點擊按鈕就為輸入框賦值。

3、然后把輸入框和按鈕的css樣式寫好。

4、打開瀏覽器測試一下，點擊按鈕之后輸入框內自動居中了。

答案是css的文本屬性middle屬性。

middle屬性規定元素中的文本的水平對齊方式。

該屬性通過指定行框與哪個點對齊，從而設置塊級元素內文本的水平對齊方式。通過允許用戶代理調整行內容中字母和字之間的間隔，可以支持值 justify；不同用戶代理可能會得到不同的結果

1、如圖,舉個例子,在HTML中的body標簽里面寫上div標簽對<div></div>。

2、然后我們給div設置寬高，需要注意，如果不設置寬度默認是100%的哦，這樣就會占滿整個頁面。

3、然后，我們給div加上深粉色的背景顏色，這樣是方便我們可以直觀的看到div的布局。

4、然后預覽div布局的預覽效果，看得出來，div默認是靠近瀏覽器左邊的，距離右邊很遠，這樣就不是居中對齊。

5、接著我們給div設置margin，第一個參數表示頂部的距離為0，而第二個auto表示的是自動。也就是說，設置這個之后，div會自動根據網頁來居中。

6、之后，再來瀏覽效果，可以看到此時的div塊已經自動居中了，它距離瀏覽器左右兩邊的距離是一樣的。