我们在写轮播图时，底部的小圆点或数字会放在一个ul下li里，这时候一般都要求小圆点或数字垂直居中，今天就写一个简单的li在ul中水平垂直居中。

 

　　轮播图一般有两种，左右轮播和上下轮播，对应的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;

 

　　}