如何居中图片滑块中的图片与单选按钮？已尝试flex属性无效

我制作了一个图片滑块，想要将其中的图片和导航按钮居中，尝试使用justify-content和align-items属性但没有效果。以下是我的代码：

HTML代码 #

<!--image slider start-->
<div class="slider">
    <div class="slides">
        <!--radio buttons start-->
        <input type="radio" name="radio-btn" id="radio1">
        <input type="radio" name="radio-btn" id="radio2">
        <input type="radio" name="radio-btn" id="radio3">
        <input type="radio" name="radio-btn" id="radio4">
        <!--radio buttons end-->
        <!--slide images start-->
        <div class="slide first">
            <img src="images/slider-1.jpg" alt="">
        </div>
        <div class="slide">
            <img src="images/slider-2.jpg" alt="">
        </div>
        <div class="slide">
            <img src="images/slider-3.jpg" alt="">
        </div>
        <div class="slide">
            <img src="images/slider-4.jpg" alt="">
        </div>
        <!--slide images end-->    
        <!--automatic navigation start-->
        <div class="nav-auto">
            <div class="auto-btn1"></div>
            <div class="auto-btn2"></div>
            <div class="auto-btn3"></div>
            <div class="auto-btn4"></div>
        </div>
        <!--automatic navigation end-->                          
    </div>
    <!--manual navigation start-->
    <div class="nav-manual">
        <label for="radio1" class="manual-btn"></label>
        <label for="radio2" class="manual-btn"></label>
        <label for="radio3" class="manual-btn"></label>
        <label for="radio4" class="manual-btn"></label>
    </div>
    <!--manual navigation end-->
</div>
<!--image slider end-->

<script type="text/javascript">
    var counter = 1;
    setInterval(function(){
        document.getElementById('radio' + counter).checked = true;
        counter++;
        if(counter > 4){
            counter - 1;
        }
    }, 5000);
</script>

CSS代码 #

/**For slider images**/
.slider {
    width: 800px;
    height: 500px;
    overflow:  hidden;
}

.slides {
    width: 500%;
    height: 500px;
    display: flex;
}

.slides input {
    display: none;
}

.slide {
    width: 20%;
    transition: 2s;
}

.slide img {
    left: 50%;
    width: 800px;
    height: 500px;
}

/**for manual slide nav**/
.nav-manual {
    position: absolute;
    width: 800px;
    margin-top: -40px;
    display: flex;
    justify-content: center;

}

.manual-btn {
    border: 2px solid #add8e7;
    padding: 5px;
    border-radius: 10px;
    cursor: pointer;
    transition: 1s;
}

.manual-btn:not(:last-child) {
    margin-right: 40px;
}

.manual-btn:hover {
    background: #add8e7;
}

#radio1:checked ~ .first {
    margin-left: 0;
}

#radio2:checked ~ .first {
    margin-left: -20%;
}

#radio3:checked ~ .first {
    margin-left: -40%;
}

#radio4:checked ~ .first {
    margin-left: -60%;
}

/**for automatic nav**/
.nav-auto {
    position: absolute;
    display: flex;
    width: 800px;
    justify-content: center;
    margin-top: 460px;

}

.nav-auto div {
    border: 2px solid #add8e7;
    padding: 5px;
    border-radius: 10px;
    transition: 1s;
}

.nav-auto div:not(:last-child) {
    margin-right: 40px;
}

#radio1:checked ~ .nav-auto .auto-btn1 {
    background: #add8e7;
}

#radio2:checked ~ .nav-auto .auto-btn2 {
    background: #add8e7;
}

#radio3:checked ~ .nav-auto .auto-btn3 {
    background: #add8e7;
}

#radio4:checked ~ .nav-auto .auto-btn4 {
    background: #add8e7;
}

问题分析与修复方案 #

1. 让整个滑块容器居中 #

当前.slider是固定宽度但未设置水平居中，添加margin: 0 auto;即可让它在父容器中水平居中；同时必须给.slider添加position: relative，作为绝对定位元素的参考容器：

.slider {
    width: 800px;
    height: 500px;
    overflow: hidden;
    margin: 0 auto; /* 添加水平居中 */
    position: relative; /* 添加绝对定位参考 */
}

2. 让图片在slide中居中 #

你给slide img设置的left:50%因缺少position属性无效，给.slide添加flex布局即可让图片自动居中：

.slide {
    width: 20%;
    transition: 2s;
    display: flex; /* 添加flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

如果图片尺寸与.slide不一致，该设置会让图片保持比例居中显示，避免偏移。

3. 修复导航按钮的居中与定位 #

当前.nav-manual和.nav-auto是绝对定位，但因父元素无position: relative导致定位参考错误，且固定宽度会限制居中范围。修改如下：

.nav-manual {
    position: absolute;
    width: 100%; /* 改为100%，适配滑块宽度 */
    bottom: 10px; /* 用bottom代替margin-top，定位更可靠 */
    display: flex;
    justify-content: center;
}

.nav-auto {
    position: absolute;
    display: flex;
    width: 100%; /* 改为100%，适配滑块宽度 */
    justify-content: center;
    bottom: 10px; /* 用bottom代替margin-top，定位更可靠 */
}

4. 修正JS循环逻辑错误 #

定时器中counter >4时，counter -1不会改变变量值，需重置为1才能让循环正常运行：

var counter = 1;
setInterval(function(){
    document.getElementById('radio' + counter).checked = true;
    counter++;
    if(counter > 4){
        counter = 1; // 修正为重置计数器
    }
}, 5000);

内容的提问来源于stack exchange，提问作者krxshia