Html 中心分区元素

在一个div中有几个元素。我想将它们对齐到中心 垂直和水平。就好像他们在一条线上

我尝试了以下几个stackoverflow示例和许多示例 其他，你会看到我的css文件，但没有运气，如果你能把答案，并解释如何工作，这将有很大帮助。谢谢

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

*{边距：0px；
填充：0px；
}
导航{
位置：绝对位置；
左：0px；
宽度：100%；
背景色：#3333ff；
高度：40px；
文本对齐：居中；
}
导航ul{
保证金：0；
填充：0；
显示：内联块；
}
李国荣先生{
文本对齐：居中；
列表样式类型：无；
浮动：左；
宽度：150px；
}
李娜先生{
文字装饰：无；
文本对齐：居中；
字体大小：150%；
颜色：黄色；
线高：40px；/*设置为与导航中到中心线的高度相同
垂直的*/
显示：块；
}
李娜：悬停{
背景色：黄绿色；
颜色：黑色；
}
#标志{
宽度：20%；
边界半径：35%；
页边顶部：自动；
页边距底部：自动；
}
#维护{
高度：65vh；
宽度：50vw；
边框：3倍纯黑；
左边距：自动；
右边距：自动；
}
蒂里塔先生{
/*显示：块*/
保证金：0自动；
高度：105px；
宽度：400px；
}
#画廊图片{
显示：无；
}
蒂里塔斯先生{
高度：100px；
宽度：100px；
边框：3件纯蓝；
浮动：左；
}
泰里塔斯：悬停{
光标：指针；
边框颜色：红色；
转换：比例（1.5）；
}
居中{
填充：2%；
}
.prev，.next{
垂直对齐：中间对齐；
}
上一篇{
浮动：左；
保证金：0自动；
}
.下一个{
浮动：对；
}
#提里塔集装箱{
显示：内联块；
左边距：自动；
右边距：自动；
页边顶部：自动；
页边距底部：自动；
}

我想让左箭头和右箭头在同一行的中心对齐

---

无论是垂直还是水平

您都可以使用flexbox轻松进行布局。这里需要的是水平对齐的

display:flex

和

justify content:center

，垂直对齐的

align items:center

*{框大小：边框框}
.container{宽度：100%；显示：柔性；对齐内容：中心；对齐项目：中心；边框：1px红色实心}
img{显示：块；宽度：100px；边距：10px}