这是一个矩形，文本在垂直和水平方向都在中间。不要告诉我该怎么做？
.row{
width: 100%;
font-family: calibri;
background-color: #blue;
text-align: center;
color: white;
height: 100px;
margin: 30px 0px 0px 0px;
}
<div class="row">
<h1>Текст</h1>
</div>
有这样一个问题，我无法分离框架中的 2 行照片。这里有两排水平的照片，它们的框架粘在一起。不要告诉我如何拉开他们之间的距离？ 
.row{
width: 900px;
}
.pic3{
border: 3px solid #blue;
padding: 12px;
}
<div class="row4">
<div class="photo1 pic3">
<img src="images/1.jpg">
</div>
<div class="photo2 pic3">
<img src="images/2.jpg">
</div>
<div class="photo3 pic3">
<img src="images/3.jpg">
</div>
<div class="photo4 pic3">
<img src="images/4.jpg">
</div>
<div class="photo5 pic3">
<img src="images/5.jpg">
</div>
<div class="photo6 pic3">
<img src="images/6.jpg">
</div>
</div>
应该是这样的：
有一行三列。有多少没试过，中间的一张（有文字的两张图）往下滑。
.row1 {
max-width: 800px;
display: flex;
justify-content: space-between;
text-align: center;
}
.photo {
width: 250px;
}
.pic {
width: 100px;
height: 90px;
}<div class="row1">
<div class="u1">
<img src="images/1.jpg" class="photo">
</div>
<div class="u2">
<h4>Текст</h4>
<img src="images/pic4.png" class="pic">
<h4>Текст</h4>
<img src="images/pic5.png" class="pic">
</div>
<div class="u3">
<img src="images/2.jpg" class="photo">
</div>
</div>
（一切应该是什么样子或类似的东西，一切都在同一水平上。）https://prnt.sc/10c7nh3
.S2{
color: gray;
font-family: calibri;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
flex-wrap: wrap;
max-width: 50%;
}
<body>
<div class="S2">
<img style="border: 3px solid white;" src="images/1.jpg" width="250" height="220">
<img style="border: 3px solid white;" src="images/2.jpg" width="250" height="220">
<img style="border: 3px solid white;" src="images/3.jpg" width="250" height="220">
<img style="border: 3px solid white;" src="images/4.jpg" width="250" height="220">
</div>
</body>