在頁面佈局時，經常會用到li標籤，它可用於列表，導航，選項卡等等，那你知道如何讓ul中的li居中嗎？這篇文章就和大家講講如何讓ul中的li水平居中以及如何讓li內容垂直居中。有興趣的朋友繼續往下看吧。
1、li內容垂直居中
flex-direction 屬性規定靈活項目的方向。當設定它的屬性值為column時，表示靈活的項目將垂直顯示，正如一個欄位一樣。 justify-content 用於設定或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式，當設定其屬性值為center時，表示項目位於容器的中心。這樣就可以實現ul中li內容的垂直居中。程式碼如下：
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 屬性規定靈活項目的方向。當設定它的屬性值為row時（預設值），表示靈活的項目將水平顯示，正如一個行一樣。 justify-content 用於設定或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式，當設定其屬性值為center時，表示項目位於容器的中心。這樣就可以實現ul中li內容的水平居中。程式碼如下：
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>效果圖：
總結：以上介紹了ul中li標籤內容居中的方法，如果是垂直居中，就用 flex-direction: column;如果是水平居中，就用flex-direction: row;不了解的小伙伴，可以自己動手嘗試，看看能不能實現li內容居中的效果，希望這個教學可以幫助你！
以上是圖文詳解ul中li內容垂直居中和水平居中的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
