将div放在另一个div上

Question

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

  <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;in map_viewand display: table-cell; vertical-align: middle;on 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. 垂直和水平对中,简单易行
3. 等高柱简单易行
4. 用于对齐flex元素的多个选项
5. 它的反应灵敏
6. 与浮动和桌子不同,浮动和桌面提供有限的布局容量,因为它们从未用于建筑布局,flexbox是一种现代(CSS3)技术,具有广泛的选项.

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