本文小编为大家详细介绍“HTML怎么让ul中的li水平垂直居中”，内容详细，步骤清晰，细节处理妥当，希望这篇“HTML怎么让ul中的li水平垂直居中”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
1、轮播图左右轮播，li水平排列：
<divclass="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
.box{
width:100%;
height:200px;
border:1pxsolidred;
}
.boxul{
height:200px;
display:flex;
flex-direction:row;
justify-content:center;
}
.boxulli{
list-style:none;
height:200px;
line-height:200px;
}
效果：
垂直居中1.png
2、轮播图上下轮播，li垂直排列：
<divclass="box1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
.box1{
width:100px;
height:300px;
border:1pxsolidred;
}
.box1ul{
height:300px;
display:flex;
flex-direction:column;
justify-content:center;
}
.box1ulli{
list-style:none;
margin:0auto;
}
读到这里，这篇“HTML怎么让ul中的li水平垂直居中”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
