使用css实现不定宽高元素的垂直水平居中

给定三个li标签，使li元素的内部使用不同的方式实现垂直水平居中

<ul>
        <li class="li1">
            <p>123</p>
        </li>
        <li class="li2">
            <p>123</p>
        </li>
        <li class="li3"><span class="span1">￥</span><span class="span2">123</span></li>
    </ul>

css通用样式：

 ul {
            width: 300px;

        }

        ul li {
            width: 100%;
            height: 60px;
            background-color: beige;
            margin-top: 10px;
            list-style: none;
        }

具体实现方法：

1、使用display：flex

 .li3 {
            display: flex;
            justify-content: center;
            align-items: center;
        }

2、使用line-height行高等于盒子高度实现垂直居中,text-align:center实现水平居中

.li2 {
            line-height: 60px;
            text-align: center;
        }

3、对块级元素使用margin：auto，但是块级元素中有左右两侧会实现居中，垂直方向无法实现，所以需要使用display：flex方式使垂直方向的margin：auto生效

.li1 {
            display: flex;
        }

        .li1>p {
            margin: auto;

        }

最后实现：