Flexbox 垂直居中/移动浏览器问题答案

【问题标题】：Flexbox vertical centering/mobile browser issuesFlexbox 垂直居中/移动浏览器问题
【发布时间】：2018-05-29 01:05:09
【问题描述】：

上下文：我有一个使用display: flex 的容器，并且我将一个svg 元素垂直居中在页面的中心。页面上唯一的其他内容是 A) 从文档流中取出且不占用空间的固定页眉和 B) 带有 position: absolute 的页脚也不应该占用空间。居中在每个浏览器上都能正常工作，但移动 chrome/移动 ios 除外。垂直居中在 Firefox 移动版上正确显示。

问题：flex 容器的子元素没有在 IOS Safari 和 Chrome Mobile 上居中。似乎地址栏由于某种原因而偏离了对齐方式。任何人都可以提供任何见解或帮助我解决问题吗？我无法在 chrome 开发工具中复制该问题。

任何帮助表示赞赏。感谢社区。p>

.logo-flexcontainer {
  align-items: center;
  display: flex;
  height: 100vh;
  margin: 0 auto;
  width: 90%;
  @media (min-width: 1024px) {
    width: 50%;
  }
}

.logo-flexcontainer > div {
  flex: 1 0 auto;
}

#mobile-navbar {
  display: flex;
  align-items: center;
  position: fixed; /* Set the navbar to fixed position */
  width: 100%; /* Full width */
  height: 50px;
  top: 0; /* Position the navbar at the top of the page */
  transition: transform .1s ease, background-color .5s ease;
  &.hidden {
    transform: translate3d(0,-100%,0);
  }
  &.scroll-background {
    background-color: rgba(0, 0, 0, 0.8)
  }
  @media (min-width: 1024px) {
    display: none;
  }
  #page-title {
    margin: 5px 0 0 5%;
    h3 {
      font-size: 6vw;
      text-shadow: 1px 1px #000;
      @media (min-width: 600px) {
        font-size: 2rem;
      }
      a {
        text-decoration: none;
      }
    }
  }
  #hamburger {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 5px;
    right: 10px;
    cursor: pointer;
    span {
      display: block;
      position: absolute;
      height: 6px;
      width: 100%;
      background: #FFFFFF;
      box-shadow: 1px 1px #000;
      &:nth-child(1) {
        top: 6px;
      }
      &:nth-child(2) {
        top: 18px;
      }
      &:nth-child(3) {
        top: 30px;
      }
    }
  }
}

footer {
  position: absolute;
  text-align: center;
  left: 0;
  bottom: 0;
  height: 100px;
  width: 100%;
  svg {
  	height: 90%;
    @media (max-width: 550px) {
  		height: 80%;
    }
  }
}

<div class="logo-flexcontainer">
  <div>
    <svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 598.6 323.5">
      <g>svg code goes here...</g>
    </svg>
  </div>
</div>
<footer>
  social icons here, code not important
</footer>

这里是该项目的实时链接：project link 看看您是否可以在您的 Android 或 iPhone 设备上复制该问题。

chrome mobile 和 firefox mobile 上的两张主页图片。

左边是错误的方向，右边是预期的结果。

【问题讨论】：

看起来固定标题没有从移动 Webkit 浏览器的文档流中删除。
如果你从height: 100vh更改为百分比，height: 100%，然后将height: 100%添加到它的所有父母，例如html, body { height: 100%; }
@Michael_B：您的想法可能是正确的。我的第一个直觉是地址栏被添加到文档流中。让我试试LGSon提出的解决方案
您可能正在使用尚未完全更新的浏览器。但这只是一个理论。在这里查看我的答案：stackoverflow.com/q/32991051/3597276
@Michael_B 在最新版本的 Chrome 和 Safari（移动版）上对此进行了测试

标签： html css responsive-design flexbox

【解决方案1】：

我读了很多书，现在我意识到这是一个有据可查的问题。我最初的直觉是正确的，chrome 移动地址栏为文档流增加了 60px。当你创建一个 100vh 的元素时，它实际上延伸到了手机屏幕底部 60px 之外。对我来说，这似乎是一个错误，但 chrome 开发团队认为它是一个功能。 Calculating Viewport Height on Chrome Android with CSS

这是谷歌对此的官方声明：https://developers.google.com/web/updates/2016/12/url-bar-resizing

对于发布此问题以代替此新信息，我深表歉意。

【讨论】：