Question

当地址栏和工具栏显示时，我想在iPhone上垂直居中一个div。当浏览器全屏显示时，我可以在横向上完成这项工作......

Div is vertically centered when toolbars aren't showing

但是一旦工具栏出现，div就不会居中。

enter image description here

有没有办法让div在不使用Javascript的情况下相对于窗口的可见部分居中？

这是我目前的代码：

body,
div {
  margin: 0;
  padding: 0;
}
div {
  width: 100%;
  height: 50px;
  position: absolute;
  top: calc(50vh - 25px);
  background-color: yellow;
}

<!DOCTYPE html>
<html>

<head>
  <meta name='viewport' content='width=device-width initial-scale=1.0' />
</head>

<body>
  <div>Centered?</div>
</body>

</html>

Answer 1

我建议您在div内添加div。然后，您将嵌入的div设为width: 100%和max-width: 1000px，并使用您设置的max-width，同时添加margin: 0 auto;以使其居中。至于你的文字，这只不过是text-align：center;

我对你的解决方案的建议是：

HTML：

<div class="parentclass">
    <div class="childclass">Centered?</div>
</div>

CSS：

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

div.parentclass {
    width: 100%;
    }
    div.childclass{
        margin: 0 auto;
        padding: 20px;
        width:100%;
        max-width: 1000px;
        text-align:center;
        }

在iPhone Safari上的工具栏之间居中？

1 个答案: