CSS實現文字居中于圖片？

1、前端用到的編輯器有很多，本例通過選擇Sublime Text3編輯器來實現文字居中圖片的制作。第一步，打開電腦中安裝的Sublime Text3，新建demo文件夾用來存放文件，在里面新建一個html文件，通過Tab快捷鍵迅速創建一個html模板，并命名標題。如圖：

2、第二步，在頂部head標簽里引入外部CSS文件。當然，因為本例比較簡單，就直接寫在style標簽里了。建議實際開發應該寫在外部CSS文件中。

3、第三步，在Body中寫簡單的html代碼。在一個容器div中，給一個類名，然后加一個子div，命名類名，用來填充文字。子div中加一個h標簽，引入文字，隨便寫幾個文字。如圖：

4、第四步，寫父級div的樣式。其主要作用是包裹子級div。為了看得比較明顯，加一個邊框樣式：border：1px solid #093。如圖：

5、第五步，寫主要的字div樣式。設置長度和寬度，以及邊框樣式；文字顏色以及字體大小；接著以一張圖片作為背景圖片，不重復：background: url(images/0.jpg) no-repeat。如圖。你也可以隨時在瀏覽器中查看效果。可以看到，此時，文字是在圖片最上面。

6、第六步，接著是最關鍵的部分，設置文字居中于圖片，包括垂直和水平方向上的居中。其中，line-height：630px，使行高等于高度，文字即可在垂直方向居中；text-align: center，實現水平居中。如圖：