我在我的网络应用程序中添加了一个登陆页面,因此当它从服务器加载数据时,登陆页面会显示加载图像和描述。
<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>
居中在其父分区上。我可以使用 text-align: center;
使其水平居中。但我找不到将其垂直居中的方法。我也想让它兼容不同的屏幕尺寸,所以无论在什么设备上,加载 div 总是在其父 div 的中心。
我尝试使用 display: table;
在 map_view
和 display: table-cell; vertical-align: middle;
在 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 */
}
flexbox 的优势:
- 最少的代码;非常有效率
- centering, both vertically and horizontally, is simple and easy
- equal height columns are simple and easy
- multiple options for aligning flex elements
- react 灵敏
- 与 float 和表格不同,它们提供的布局容量有限,因为它们从未用于建筑布局, flexbox 是一种具有广泛选项的现代 (CSS3) 技术。
注意所有主流浏览器都支持 flexbox,except IE 8 & 9 .一些最新的浏览器版本,例如 Safari 8 和 IE10,需要 vendor prefixes .要快速添加所需的所有前缀,请在此处的左侧面板中发布您的 CSS:Autoprefixer .
关于html - 将一个 div 置于另一个 div 之上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34583337/