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的中心。

我尝试使用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的好处：

最小代码;效率很高
centering, both vertically and horizontally, is simple and easy
equal height columns are simple and easy
multiple options for aligning flex elements
它的响应
与花车和桌子不同，它们提供的布局容量有限，因为它们从未用于建筑布局， flexbox是一种现代（CSS3）技术，具有广泛的选项。

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

Answer 2

使用此技巧将内容完美地集中在网站中。只需要强调，只有外部容器具有定义的高度时才会起作用。

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

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

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

调整translate以在容器中向上或向下移动元素。 -50％居中。

在＆＃39;转换中使用-moz- -o-和-webkit-前缀：＆＃39;浏览器兼容性：

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上

2 个答案: