1、li内容垂直居中

    flex-direction属性规定灵活项目的方向。当设置它的属性值为column时，表示灵活的项目将垂直显示，正如一个列一样。justify-content用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式，当设置其属性值为center时，表示项目位于容器的中心。这样就可以实现ul中li内容的垂直居中。代码如下：

    HTML部分：

    <divclass="box">

    <ul>

    <li>aa</li>

    <li>bb</li>

    <li>cc</li>

    <li>dd</li>

    </ul>

    </div>

    CSS部分：

    <styletype="text/css">

    .box{

    width:300px;

    height:300px;

    border:1pxsolidred;

    }

    .boxul{

    height:300px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    }

    .boxulli{

    list-style:none;

    margin:0auto;

    }

    </style>








本文转载自中文网