html - 将一个 div 置于另一个 div 之上

Question

我在我的网络应用程序中添加了一个登陆页面，因此当它从服务器加载数据时，登陆页面会显示加载图像和描述。

  <div class="map_view">
    <!-- shown only when data is not available -->
    <div class="loading_screen">
      <img src="/img/loading_boys.gif"/>
      <h2>Connecting to the the network ...</h2>
    </div>;
  </div>

div loading screen位于 div map_view 之上.我想将图像和 <h2> 居中在其父分区上。我可以使用 text-align: center;使其水平居中。但我找不到将其垂直居中的方法。我也想让它兼容不同的屏幕尺寸，所以无论在什么设备上，加载 div 总是在其父 div 的中心。

我尝试使用 display: table;在 map_view和 display: table-cell; vertical-align: middle;在 loading_screen , 但随后谷歌地图消失了，只有背景颜色。

Answer 1

试试这个:

.loading_screen {
    display: flex;            /* establish flex container */
    flex-direction: column;   /* align children vertically (column format) */
    justify-content: center;  /* center children vertically */
    align-items: center;      /* center column horizontally */
}

---

flexbox 的优势:

1. 最少的代码；非常有效率
2. centering, both vertically and horizontally, is simple and easy
3. equal height columns are simple and easy
4. multiple options for aligning flex elements
5. react 灵敏
6. 与 float 和表格不同，它们提供的布局容量有限，因为它们从未用于建筑布局， flexbox 是一种具有广泛选项的现代 (CSS3) 技术。

---

注意所有主流浏览器都支持 flexbox，except IE 8 & 9 .一些最新的浏览器版本，例如 Safari 8 和 IE10，需要 vendor prefixes .要快速添加所需的所有前缀，请在此处的左侧面板中发布您的 CSS:Autoprefixer .