Center div elements

Question

I have a few elements inside a div. i want to align them center vertically and horizontally. as if they where in one line like this

I've tried following several stackoverflow samples margin auto and many other as you will see on my css file but no luck if you can please just put the answer and explain how is working it will help a lot. thanks.

<div id="tiritaContainer">
          <div class="tirita">

              <div  class="tiritas"><img id="tirita1"  
src="assets/pictures/Front house.jpg" alt=""/></div>
              <div  class="tiritas"><img id="tirita2"  
src="assets/pictures/28.jpg" alt=""  ></div>
              <div  class="tiritas"><img id="tirita3"  
src="assets/pictures/27.jpg" alt=""  ></div>

          </div>
          <img class="next" src="assets/pictures/arrow-right.png" 
alt=""/>

          </div>




*{margin:0px;
padding: 0px;
}

nav{
position:absolute;
left:0px;
width:100%;
background-color: #3333ff;
height: 40px;
text-align: center;
}
nav ul{
margin: 0;
padding:0;
display: inline-block;
}
.nav li{
  text-align: center;
  list-style-type: none; 
  float: left; 
  width: 150px;

}
.nav li a{
text-decoration: none;
text-align: center;
font-size: 150%;
color: yellow;
line-height: 40px; /*set same as height in nav to center line 
vertically.*/
display:block;
}
.nav li a:hover{
background-color: chartreuse;
color:black;
}
#logo{
width:20%;
border-radius: 35%;
margin-top: auto;
margin-bottom: auto;
}

#mainImg{
height: 65vh;
width: 50vw;
border: 3px solid black;
margin-left:auto;
margin-right:  auto;
}

.tirita{
/*display:block;*/

margin: 0 auto;
height: 105px;
width:400px;





}
#gallery img{
display: none;
}
.tiritas img{
height:100px;
width: 100px;
border: 3px solid blue;
float:left;



}
.tiritas:hover{
cursor: pointer;
border-color: red;
transform: scale(1.5);
}
center{
padding:2%;
}
.prev,.next{

vertical-align: middle;

}
.prev{

float:left;
margin: 0 auto;
}
.next{
float:right;


}
#tiritaContainer{
display: inline-blockblock;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
}

i want to have the left and right arrow in the same row aligned center both vertical and horizontally

Answer 1

You can use flexbox to make a layout easily. What you need here is display:flex and justify-content:center for horizontal alignment and align-items:center for vertical alignment.

*{box-sizing:border-box}
.container{width:100%;display:flex;justify-content:center;align-items:center;border:1px red solid}

img{display:block;width:100px;margin:10px}

<div class="container">
    <img src="http://via.placeholder.com/100x150/fff000" alt="">
    <img src="http://via.placeholder.com/100x100/ff0000" alt="">
    <img src="http://via.placeholder.com/100x120/0000ff" alt="">
</div>