代码之家 › 专栏 › 技术社区 › Joel Hoelting

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

flexbox responsive-design css html

Joel Hoelting · 技术社区 · 7 年前

上下文:我有一个容器使用 display: flex 我将一个svg元素垂直居中于页面中心。页面上唯一的其他内容是A)从文档流中取出的固定页眉,不占用空间;B)页脚 position: absolute 这也不应该占用空间。除mobile chrome/mobile ios外,其他浏览器都可以正确使用居中功能。firefox mobile上的垂直居中显示正确。

问题:flex容器的子元素没有集中在IOS Safari和Chrome Mobile上。地址栏似乎出于某种原因偏离了对齐方式。有人能提供一些见解或帮助我调试问题吗?我无法在chrome开发工具中复制该问题。

感谢您的帮助。感谢社区。

.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上主页的两张图片。

左侧为错误方向,右侧为预期结果。

1 回复 | 直到 7 年前

Joel Hoelting 7 年前

我已经读了很多书,现在我意识到这是一个有充分记录的问题。我最初的直觉是正确的,chrome移动地址栏为文档流添加了60px。当你创建一个100vh的元素时,它实际上会在手机屏幕底部延伸60px。在我看来,这似乎是一个bug,但chrome开发团队认为这是一个特性。 Calculating Viewport Height on Chrome Android with CSS

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

很抱歉,我将此问题替换为新信息。