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

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

1、li內容垂直居中

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

HTML部分：

<div class="box">
    <ul>
	 <li>aa</li>
	 <li>bb</li>
	 <li>cc</li>
	 <li>dd</li>
    </ul>
</div>

CSS部分：

<style type="text/css">
	.box{
	     width: 300px;
	     height: 300px;
	     border: 1px solid red;
	    }
	.box ul{
	     height: 300px;
	     display: flex;
	     flex-direction: column;
	     justify-content: center;
	    }
	
	 .box ul li{
	      list-style: none;
	      margin: 0 auto;
	      }
</style>

效果圖：

2、li內容水平居中

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

HTML部分：

<div class="box">
	<ul>
	   <li>今天心情不錯</li>
	   <li>今天心情不錯</li>
	   <li>今天心情不錯</li>
	   <li>今天心情不錯</li>
	 </ul>
</div>

CSS部分：

<style type="text/css">
	.box{
		width: 100%;
		height: 200px;
		border: 1px solid #000;
		}
	 .box ul{
		 height: 200px;
		 display: flex;
		 flex-direction: row;
		 justify-content: center;
		 }
	 .box ul li{
		    list-style: none;
		    height: 200px;
		    line-height: 200px;
		   }
</style>

效果圖：

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

文章題目：css如何實現(xiàn)ul中l(wèi)i內容垂直居中和水平居中-創(chuàng)新互聯(lián)
本文路徑：http://www.chinadenli.net/article30/djhgso.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網站制作、外貿建站、Google、全網營銷推廣、手機網站建設、營銷型網站建設

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)