Css 将元件垂直居中于其上'；s兄弟姐妹身高

我试图将容器img:nth child（2）垂直居中到它的兄弟姐妹高度，但它就是不起作用。我尝试使用大量命令将其垂直居中（并将其添加到-.container和.child中），但什么也没发生。 另外，当窗口缩小时，我希望第一个

.container img

子对象居中，位于第二个子对象之上。整个容器还应与浏览器窗口宽度的中心水平对齐（附屏幕截图）

是否可以不使用媒体查询？你们能帮帮我吗？我是一个初学者，我真的想弄清楚那些显示和定位

正文{
保证金：0；
}
.家长{
背景图像：url（“http://bossfight.co/wp-content/uploads/2016/04/boss-fight-free-high-quality-stock-images-photos-photography-trees-forest-mist.jpg");
背景尺寸：封面；
柔性包装：包装；
高度：100vh；
位置：相对位置；
}
.家长h1{
边际上限：0；
垫面：2米；
文本对齐：居中；
字体系列：helvetica；
}
.集装箱{
显示器：flex；
对齐项目：居中；
证明内容：中心；
对齐内容：居中对齐；
位置：绝对位置；
底部：2米；
宽度：100%；
}
.孩子{
显示：内联flex；
填充：0 5px；
}
.集装箱img{
浮动：左；
}
.货柜a{
不透明度：0.5；
}
.容器a：悬停{
不透明度：1；
}

随机标题
标题示例

您可以在媒体查询中使用嵌套的flexbox

@media (max-width: 768px) {
  .container a {
    flex-direction: column;
  }
}

将每个锚链制作为flexbox

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

在媒体查询中切换

flex direction

值

@media (max-width: 768px) {
  .container a {
    flex-direction: column;
  }
}

正文{
保证金：0；
}
.家长{
背景图像：url（“http://bossfight.co/wp-content/uploads/2016/04/boss-fight-free-high-quality-stock-images-photos-photography-trees-forest-mist.jpg");
背景尺寸：封面；
柔性包装：包装；
高度：100vh；
位置：相对位置；
}
.家长h1{
边际上限：0；
垫面：2米；
文本对齐：居中；
字体系列：helvetica；
}
.集装箱{
显示器：flex；
对齐项目：居中；
证明内容：中心；
/*对齐内容：居中对齐*/
位置：绝对位置；
底部：2米；
宽度：100%；
}
.孩子{
填充：0 5px；
}
.集装箱img{
/*浮动：左*/
}
.货柜a{
不透明度：0.5；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.容器a：悬停{
不透明度：1；
}
@介质（最大宽度：768px）{
.货柜a{
弯曲方向：立柱；
}
}

标题示例

让您的显示器：flex；证明内容：中心；弯曲方向：行 并具有灵活性：0 1自动；自对准：居中

正文{
保证金：0；
}
.家长{
背景图像：url（“http://bossfight.co/wp-content/uploads/2016/04/boss-fight-free-high-quality-stock-images-photos-photography-trees-forest-mist.jpg");
背景尺寸：封面；
柔性包装：包装；
高度：100vh；
位置：相对位置；
}
.家长h1{
边际上限：0；
垫面：2米；
文本对齐：居中；
字体系列：helvetica；
}
.集装箱{
显示器：flex；
对齐项目：居中；
证明内容：中心；
对齐内容：居中对齐；
位置：绝对位置；
底部：2米；
宽度：100%；
}
.孩子{
显示：内联flex；
填充：0 5px；
}
.child>a{
显示器：flex；
弯曲方向：行；
证明内容：中心；
}
.child>a>img{
flex:01自动；
自对准：居中
}
.集装箱img{
浮动：左；
}
.货柜a{
不透明度：0.5；
}

随机标题
标题示例

您试图避免媒体查询有什么原因吗？