css中設定div居中顯示的方法

我們進行頁面開發的時候，最經常用的就是div標籤了，那麼div中的內容如何居中顯示呢，下面小編給大家分享一下。

工具/材料

Sublime Text

操作方法

首先我們用sublime先建立一個html，並且在html裡面加入div，如下圖所示

然後我們在div中加入一些文字，如下圖所示，文字用span包裹起來

執行頁面程式以後我們會看到文字在div的左上角，並沒有居中的效果，如下圖所示

接下來我們就需要用CSS給div中的內容設定居中了，如下圖所示，通過text-align和line-height實現

最後執行介面程式，我們看到div中的內容這次水平和垂直都居中了，如下圖所示