将div置于另一个div的中心 [英] Center a div over another div

问题描述

我在Web应用程序中添加了一个登录页面，因此当它从服务器加载数据时，该登录页面会显示加载图像和说明.

I added a landing page to my webapp, so when it is loading data from the server, the landing page is shown with a loading image and a description.

  <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的中心.

The div loading screen is on top of div map_view. I want to center the image and the <h2> on its parent div. I can use text-align: center; to center it horizontally. But I cannot find a way to center it vertically. I want to make it compatible to different screen sizes as well, so no matter in what devices, the loading div is always in the center of its parent div.

我尝试在map_view和loading_screen的map_view中使用display: table;，但是随后Google地图消失了，只带有背景色.

I tried to use display: table; in map_view and display: table-cell; vertical-align: middle; on loading_screen, but then the google map disappears, with just a background color.

推荐答案

尝试一下:

.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. 用于对齐弹性元素的多个选项
5. 反应灵敏
6. 与花车和桌子不同，后者提供有限的布局功能，因为它们从未打算用于建筑布局， flexbox是一种现代(CSS3)技术，具有多种选择.

1. minimal code; very efficient
2. centering, both vertically and horizontally, is simple and easy
3. equal height columns are simple and easy
4. multiple options for aligning flex elements
5. it's responsive
6. unlike floats and tables, which offer limited layout capacity because they were never intended for building layouts, flexbox is a modern (CSS3) technique with a broad range of options.

---

请注意，除IE 8和IE 8以外，所有主流浏览器均支持flexbox， 9 .某些最新的浏览器版本(例如Safari 8和IE10)需要供应商前缀.为了快速添加所需的所有前缀，请在左侧面板中的以下位置发布CSS: Autoprefixer .

---

Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.

这篇关于将div置于另一个div的中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！