我向Web应用程序添加了一个登录页面，因此，当它从服务器加载数据时，该登录页面会显示加载图像和说明。
<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>
divloading screen位于div的顶部map_view。我想将图像居中<h2>放置在其父div上。我可以用来text-align: center;水平居中。但是我找不到垂直居中的方法。我也想使其兼容于不同的屏幕尺寸，因此无论在什么设备上，加载div始终位于其父div的中心。
我尝试display: table;在map_view和display: table-cell; vertical-align: middle;上使用loading_screen，但随后Google地图消失了，只有背景色。
试试这个：
.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的优点：
请注意，除了IE 8和9之外，所有主要浏览器都支持flexbox 。某些最新的浏览器版本（例如Safari 8和IE10）需要供应商前缀。要快速添加所需的所有前缀，请在左侧面板中的以下位置发布CSS：Autoprefixer。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句