Cant move container from the top-CodePudding

I want to put my container on the middle of the screen but I just cant, it always stays on top I dont understand why, can somebody tell me how can I put it to the middle of the screen ?.

I tried using padding-top as a last resource to check if it would work but it ended up moving everything down minus the black rectangle.

My html:

<div class = "container">
<!-- Slider main container -->
<div >
    <!-- Additional required wrapper -->
    <div >
      <!-- Slides -->
      <div ><img src ="No-Good-Racing__.png" class= "center"></div>
      <div ><img src ="transferir.png" class= "center"></div>
      <div ><img src ="" class= "center"></div>
      <div ><img src ="" class= "center"></div>
      <div ><img src ="" class= "center"></div>
      <div ><img src ="" class= "center"></div>
      <div ><img src ="" class= "center"></div>
      <div ><img src ="" class= "center"></div>
    </div>

    <div ></div>

    <div ></div>
    <div ></div>

  </div>
 </div>
 <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

My css:


.container{
    width: 50%;
    height: 50vh;
    background: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    vertical-align: middle
}

.swiper{
    width: 80%;
    height: fit-content;
}

.center{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    
}

img {
    height: 468.5px;
    width: 624px;
    object-fit: contain;
}

.swiper .swiper-button-prev, .swiper .swiper-button-next{
    color: #fff;
}

.swiper .swiper-pagination-bullet-active{
    background: #fff;
}

CodePudding user response：

use css flex box that easy to centre any data or div.

Html code

<div >
//Other code
</div>

css code

.main{
   Width: 100%;
   Height:100%;
   Display:flex;
   justify-content: center;
   align-item: center;
}

CodePudding user response：

HTML

<div >

CSS

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

.box div {
  width: 100px;
  height: 100px;
}