ul 中 li 内容垂直居中和水平居中的方法

1、li内容垂直居中

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

HTML部分：

1

2

3

4

5

6

7

8

     aa

     bb

     cc

     dd

CSS部分：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

    .box{

         width: 300px;

         height: 300px;

         border: 1px solid red;

        }

    .box ul{

         height: 300px;

         display: flex;

         flex-direction: column;

         justify-content: center;

        }

     .box ul li{

          list-style: none;

          margin: 0 auto;

          }

效果图：

2、li内容水平居中

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

HTML部分：

1

2

3

4

5

6

7

8

       今天心情不错

       今天心情不错

       今天心情不错

       今天心情不错

CSS部分：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

    .box{

        width: 100%;

        height: 200px;

        border: 1px solid #000;

        }

     .box ul{

         height: 200px;

         display: flex;

         flex-direction: row;

         justify-content: center;

         }

     .box ul li{

            list-style: none;

            height: 200px;

            line-height: 200px;

           }

效果图：