Question

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

问题：Flex容器的子元素没有以IOS Safari和Chrome Mobile为中心。由于某种原因，似乎地址栏正在抛弃对齐。任何人都可以提供任何见解或帮助我调试问题的方法吗？我无法在chrome dev工具中复制这个问题。

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

＆＃13;

.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%;
    }
  }
}

＆＃13;

<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>

＆＃13;

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

Chrome mobile和firefox mobile的两张主页图片。

左边是不正确的方向，右边是预期的结果。

Answer 1

我已经阅读了很多内容，现在我意识到这是一个记录良好的问题。我最初的直觉是正确的，Chrome移动地址栏为文档流程增加了60px。当您使用100vh创建元素时，它实际上会延伸超过手机屏幕底部60px。对我来说，它似乎是一个错误，但Chrome开发团队认为它是一个功能。 Calculating Viewport Height on Chrome Android with CSS

以下是Google关于此问题的官方声明：https://developers.google.com/web/updates/2016/12/url-bar-resizing

我很抱歉发布这个问题代替这个新信息。

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

1 个答案: