将div放在另一个div上

我向我的webapp添加了一个登录页面,因此当它从服务器加载数据时,会显示着陆页面,其中包含加载图像和描述.

  

    
    

      
      
Connecting to the the network ...
    
;
  

div loading screen位于div之上map_view.我想将图像和

它的父div对中.我可以用text-align: center;它水平居中.但我找不到垂直居中的方法.我想让它兼容不同的屏幕尺寸,所以无论在什么设备中,加载div总是在其父div的中心.

我尝试使用display: table;in map_viewand display: table-cell; vertical-align: middle;on loading_screen,但随后谷歌地图消失了,只有背景颜色.

1> Michael_B..：

---

试试这个:

.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的好处:

最小代码; 效率很高

垂直和水平对中,简单易行

等高柱简单易行

用于对齐flex元素的多个选项

它的反应灵敏

与浮动和桌子不同,浮动和桌面提供有限的布局容量,因为它们从未用于建筑布局,flexbox是一种现代(CSS3)技术,具有广泛的选项.

---

请注意,除IE 8和9外,所有主流浏览器都支持flexbox .最近的一些浏览器版本,例如Safari 8和IE10,需要供应商前缀.要快速添加所需的所有前缀,请在左侧面板中发布CSS:Autoprefixer.