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

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

工具/材料

Sublime Text

操作方法

首先我們用sublime先創建一個html,並且在html裏面加入div,如下圖所示

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

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

css中設置div居中顯示的方法 第2張

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

css中設置div居中顯示的方法 第3張

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

css中設置div居中顯示的方法 第4張

最後運行界面程序,我們看到div中的內容這次水平和垂直都居中了,如下圖所示

css中設置div居中顯示的方法 第5張