图文详细说明如何让ul中的li水平垂直居中
发表时间：2025-10-20 来源：浏览器大全整理相关软件相关文章人气：
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
ul li标签在页面中用得很多，今天这篇文章就和大家分享一个li标签中的小技巧，
如何让ul中li水平垂直居中，感兴趣的朋友可以参考一下，希望对你有用。我们在写轮播图时，底部的小圆点或数字会放在一个ul下li里，这时候一般都要求小圆点或数字垂直居中，今天就写一个简单的li在ul中水平垂直居中。
轮播图一般有两种，左右轮播和上下轮播，对应的ul中的li也分为水平排列和竖直排列，下面就针对这两种情况分别说明。
1、轮播图左右轮播，li水平排列：
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
.box{
width: 100%;
height: 200px;
border: 1px solid red;
}
.box ul{
height: 200px;
display: flex;
flex-direction: row;
justify-content: center;
}
.box ul li{
list-style: none;
height: 200px;
line-height: 200px;
}效果：
2、轮播图上下轮播，li垂直排列：
<div class="box1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
.box1{
width: 100px;
height: 300px;
border: 1px solid red;
}
.box1 ul{
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
}
.box1 ul li{
list-style: none;
margin: 0 auto;
}效果：
以上就是图文详解如何让ul中的li水平垂直居中的详细内容，更多请关注php中文网其它相关文章！
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。
