如何使用CSS和/或Flexbox实现动态布局？

我有一个rails应用程序，用户可以在其中搜索地名，然后在搜索后将图像加载到同一页面。我希望它能使我的搜索框垂直和水平居中，在页面的中间。搜索完成后，图像将加载到同一页面，我希望它显示在搜索框下，搜索框现在位于顶部。基本上，图像的HTML是在按下按钮时添加的，它应该看起来像第二个图像。请原谅我在两张图片中拙劣地展示了这一点。我如何做到这一点

以下是我的HTML代码：

<div class="page-wrapper">
  <h1 class="title">The weather in GIFs</h1>

  <div class="search">
    <%= form_tag(current_weather_forecasts_path, method: :get) do %>
      <%= text_field_tag :q, nil, placeholder: "Enter a city", class: "search-field" %>
      <%= button_tag type: 'submit', class: "search-button" do %>
        <i class="fas fa-search"></i>
      <% end %>
    <% end %>
  </div>

  <% if @forecasts_facade.invalid_city? %>
    <p>Please use a valid city name!</p>
  <% elsif @forecasts_facade.missing_city? %>
    <p>Please type in a city name!</p>
  <% elsif @forecasts_facade.forecast == {} %>
  <% else %>
    <p class="weather-description"><%= "#{@city.capitalize}: #{@forecasts_facade.description}" %></p>
    <div class="gif-container"><%= image_tag(find_gif_url, class: "gif") %>
      <span class="temperature weather-attribute"><%= "#{@forecasts_facade.temperature}°C" %></span>
      <span class="wind weather-attribute"><%= "wind:#{(@forecasts_facade.wind * 3.6).to_i}km/h" %></span> <!-- converts to km/hr -->
      <span class="humidity weather-attribute"><%= "humidity:#{@forecasts_facade.humidity}%" %></span>
    </div>
  <% end %>
</div>

吉布斯的天气
请使用有效的城市名称

请输入城市名称

这就是你想要的？？？ 尝试删除gif容器div输入将居中，如果要添加gif容器，则两者将在一起

。页面包装器{
高度：100vh；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
高度：100vh；
对正内容：空间均匀；
}
.gif容器{
高度：300px；
宽度：400px；
背景：红色；
}

你能单独用html部分创建工作的JSFIDLE吗？@JLGriffin的可能副本我看不出这是一个副本…@ShubhanuSharma我不知道如何创建JSFIDLE。基本上，页面看起来像图片一，然后当你按下按钮时，图片（大框）被添加到html中。@ShubhanuSharma one需要在他的问题中，而不是在JSFIDLE中，在这里发布标记：