css “在图片上添加按钮，相对于视口水平居中”时，用百分比定位，位置失控

html 中

<ul>
    <li>
        <img src="../assets/img/index/4.png" alt="加载中……">
        <div class="li4_menu">
            <button><img src="../assets/img/index/免费试用.png" alt="加载中……"></button>
            <button><img src="../assets/img/index/获取演示.png" alt="加载中……"></button>
        </div>
    </li>
</ul>

设置其父元素

width: 100%;
height: 56px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
position: absolute;
top: 35.5%;