How to center the image and radio buttons on my image slider?

Question

I created an image slider but I don't know how to center it even though I tried using the justify-content and align-items properties but it doesn't work.

I tried using the justify-content and align-items properties but the images and the radio buttons doesn't go on center.

Here's my code:

    `

<!--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>

and here's the 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;
}`

Answer 1

• You just need to add margin: 0 auto; to the slider class
• and take the parent div of the slider and give height: 100vh; display: flex; align-items: center; make center your slider and radio buttons.

I am also attaching the code below.

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.slider-wrapper{
  height: 100vh;
  display: flex;
  align-items: center;
}

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

.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;
}

<div class="slider-wrapper">
    <!--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-->
</div>

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