如何让元素自动居中

css

   ul{

        width: auto;

        height: 100px;

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%,-50%);      

      }

html:

<ul>

        <li>1</li><li>2</li><li>2</li><li>2</li>

 </ul>