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

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

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

HTML部分：

<div class="box">
	<ul>
	   <li>今天心情不錯(cuò)</li>
	   <li>今天心情不錯(cuò)</li>
	   <li>今天心情不錯(cuò)</li>
	   <li>今天心情不錯(cuò)</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>

效果圖：

總結(jié)：以上介紹了ul中l(wèi)i標(biāo)簽內(nèi)容居中的方法，如果是垂直居中，就用 flex-direction: column;如果是水平居中，就用flex-direction: row;不了解的小伙伴，可以自己動(dòng)手嘗試，看看你能不能實(shí)現(xiàn)li內(nèi)容居中的效果，希望這個(gè)教程可以幫助到你！

以上就是圖文詳解ul中l(wèi)i內(nèi)容垂直居中和水平居中的方法的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！