我们在写轮播图时，底部的小圆点或数字会放在一个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;

    }







本文转载自中文网