html - 中心 div 元素

Question

我在一个 div 中有一些元素。我想让他们居中 垂直和水平。就好像他们像这样排成一行

我试过关注几个 stackoverflow 示例 margin auto 和许多 其他如您将在我的 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;
}

我想让同一行的左箭头和右箭头居中对齐 纵横皆可

Answer 1

您可以使用 flexbox 轻松地进行布局。您在这里需要的是用于水平对齐的 display:flex 和 justify-content:center 以及用于垂直对齐的 align-items:center。

*{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>