這篇文章主要介紹了css如何實現(xiàn)ul中l(wèi)i內(nèi)容垂直居中和水平居中，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)專注于中大型企業(yè)的成都網(wǎng)站設(shè)計、做網(wǎng)站、成都外貿(mào)網(wǎng)站建設(shè)公司和網(wǎng)站改版、網(wǎng)站營銷服務(wù)，追求商業(yè)策劃與數(shù)據(jù)分析、創(chuàng)意藝術(shù)與技術(shù)開發(fā)的融合，累計客戶超過千家，服務(wù)滿意度達(dá)97%。幫助廣大客戶順利對接上互聯(lián)網(wǎng)浪潮，準(zhǔn)確優(yōu)選出符合自己需要的互聯(lián)網(wǎng)運用，我們將一直專注成都品牌網(wǎng)站建設(shè)和互聯(lián)網(wǎng)程序開發(fā)，在前進(jìn)的路上，與客戶一起成長！

1、li內(nèi)容垂直居中

flex-direction 屬性規(guī)定靈活項目的方向。當(dāng)設(shè)置它的屬性值為column時，表示靈活的項目將垂直顯示，正如一個列一樣。justify-content 用于設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式，當(dāng)設(shè)置其屬性值為center時，表示項目位于容器的中心。這樣就可以實現(xiàn)ul中l(wèi)i內(nèi)容的垂直居中。代碼如下：

HTML部分：

    

	 
aa
	 
bb
	 
cc
	 
dd
    

CSS部分：

效果圖：

2、li內(nèi)容水平居中

flex-direction 屬性規(guī)定靈活項目的方向。當(dāng)設(shè)置它的屬性值為row時（默認(rèn)值），表示靈活的項目將水平顯示，正如一個行一樣。 justify-content 用于設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式，當(dāng)設(shè)置其屬性值為center時，表示項目位于容器的中心。這樣就可以實現(xiàn)ul中l(wèi)i內(nèi)容的水平居中。代碼如下：

HTML部分：

	

	   
今天心情不錯
	   
今天心情不錯
	   
今天心情不錯
	   
今天心情不錯
	 

CSS部分：

效果圖：

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享css如何實現(xiàn)ul中l(wèi)i內(nèi)容垂直居中和水平居中內(nèi)容對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)建站，關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)建站，詳細(xì)的解決方法等著你來學(xué)習(xí)!

網(wǎng)站欄目：css如何實現(xiàn)ul中l(wèi)i內(nèi)容垂直居中和水平居中-創(chuàng)新互聯(lián)
網(wǎng)頁地址：http://weahome.cn/article/djhgso.html