css如何設(shè)置字體居中？這個問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

成都創(chuàng)新互聯(lián)公司專注于烏翠網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供烏翠營銷型網(wǎng)站建設(shè)，烏翠網(wǎng)站制作、烏翠網(wǎng)頁設(shè)計、烏翠網(wǎng)站官網(wǎng)定制、微信平臺小程序開發(fā)服務(wù)，打造烏翠網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供烏翠網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

一、CSS設(shè)置字體水平居中

在CSS中可以使用text-align屬性來設(shè)置字體水平居中。該屬性規(guī)定元素中的文本的水平對齊方式，通過使用center值設(shè)置文本居中。

text-align是一個基本的屬性，它會影響一個元素中的文本行互相間的對齊方式。值left、right和center會導(dǎo)致元素中的文本分別左對齊、右對齊和居中，想要使文本居中，直接使用center即可。

該屬性設(shè)置文本和img標簽等一些內(nèi)聯(lián)對象（或與之類似的元素）的居中。

該屬性有如下幾個特點：

1）、text-align的center應(yīng)用在一個容器上，它只針對容器里面的文字以及容器里面的display為inline或者inline-block的容器，如果里面的容器display為block，則里面的容器的內(nèi)容不會居中。

2）、text-align具有向下傳遞性，會不斷地向子元素傳遞。如果設(shè)置一個div，則其子div中的內(nèi)容也會居中。

	
		
		
		
	
	
		
css 水平居中了--文本文字
	

效果圖：

二、CSS設(shè)置字體垂直居中

1、line-height屬性 使文字垂直居中---單行字體

	
		
		
		
	
	
		
css 垂直居中了--文本文字
	

效果圖：

這樣就能讓div中的文字水平垂直居中了

2、CSS3的flex布局  使文字垂直居中

	
		
		
		
	
	
		
css 垂直居中--文本文字（彈性布局）
	

效果圖：

3、vertical-align:middle +display:table-cell  使文字垂直居中

	
		
		
		

	

	

		
css 水平居中了--文本文字,文本文字,文本文字,文本文字,文本文字,文本文字。

	

效果圖：

說明：vertical-align:middle +display:table-cell能夠使單行文字、多行文字都居中。但是因為 table-cell 是 inline 類型，所以會導(dǎo)致原來的塊級元素每個 div 一行移動到了同一行。如果需要分列兩行，需要在外面額外添加容器對位置進行控制。

感謝各位的閱讀！看完上述內(nèi)容，你們對css如何設(shè)置字體居中大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。