我向我的网络应用程序添加了一个登陆页面，因此当它从服务器加载数据时，登陆页面会显示加载图像和描述。
<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>
The div loading screen位于 div 之上map_view。我想将图像和<h2>在其父 div 上。我可以用text-align: center;将其水平居中。但我找不到垂直居中的方法。我也想让它兼容不同的屏幕尺寸，所以无论在什么设备上，加载div始终位于其父div的中心。
我尝试使用display: table; in map_view and display: table-cell; vertical-align: middle; on loading_screen，但随后谷歌地图就消失了，只有背景颜色。
尝试这个：
.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 */
}
弹性盒的优点：
- 最少的代码；非常高效
- 垂直和水平居中，简单易行 https://stackoverflow.com/a/33049198/3597276
- 等高柱简单易行 https://stackoverflow.com/a/33815389/3597276
- 对齐弹性元素的多个选项 https://stackoverflow.com/a/33856609/3597276
- 它反应灵敏
- 与浮动和桌子不同，它们提供的布局能力有限，因为它们从未用于建筑布局，
Flexbox 是一种现代 (CSS3) 技术，具有广泛的选项。
请注意，所有主流浏览器都支持 Flexbox，IE 8 和 9 除外 http://caniuse.com/#search=flex。一些最新的浏览器版本，例如 Safari 8 和 IE10，需要供应商前缀 https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix。要快速添加所需的所有前缀，请将 CSS 发布到此处的左侧面板中：自动前缀器 https://autoprefixer.github.io/.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
