将 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> 置于其父 div 的中心。我可以使用 text-align: center; 将其水平居中。但我找不到将其垂直居中的方法。我也想让它兼容不同的屏幕尺寸，所以无论在什么设备上，加载 div 总是在其父 div.

的中心

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

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 的好处：

最少的代码；非常高效
centering, both vertically and horizontally, is simple and easy
响应迅速
与浮动和表格不同，它们提供有限的布局容量，因为它们从未用于建筑布局， flexbox 是一种具有广泛选项的现代 (CSS3) 技术。

请注意，所有主要浏览器都支持 flexbox，except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer。

Answer 2

使用此技巧可以使网站中的内容完美居中。只是要强调的是，这只有在外部容器具有定义的高度时才有效。

确保 .loading_screen（容器）具有固定的像素高度，并将此 css 应用于 img 和 h2（内容）：

.loading_screen {                                      
    height: 500px; /*for example*/                     /* Container */
}    

h2 {                                                   
    position: relative;
    top: 50%;                                          /* Content */
    transform: translateY(-50%);
}

调整翻译以在容器中向上或向下移动元素。 -50% 居中。

在 'transform: ' 上使用 -moz- -o- 和 -webkit- 前缀以实现浏览器兼容性：

transform: translateY();
-webkit-transform: translateY();
-o-transform: translateY();
-moz-transform: translateY();

您可以使用：

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

但是在处理多个元素堆叠时，它会产生非常尴尬和不良的效果。

将 div 置于另一个 div 之上

Center a div over another div

html

css

flexbox