Question

我正在尝试将元素置于页面中间。我可以很好地居中，但如果我垂直调整页面大小直到视图高度小于居中元素，则元素在没有滚动条的情况下垂直偏离屏幕。你可以在这里看到问题的演示：

* {
  padding: 0;
  margin: 0;
}

html, body {
  height: 100%;
}

.outer {
  text-align: center;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.inner {
  display: inline-block;
  width: 400px;
  height: 800px;
  background: grey;
}

<div class="outer">
  <div class="inner"></div>
</div>

我应该提到我已尝试过其他几种垂直居中方法，包括flexbox，我仍然遇到同样的问题。有没有办法用这种垂直居中方法解决这个问题，还是至少有一个没有这个问题的垂直居中方法？

Answer 1

这应该有效

＆＃13;

* {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100vh;
}
.outer {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner {
  width: 400px;
  height: 800px;
  background: grey;
}

＆＃13;

<div class="outer">
        <div class="inner"></div>
</div>

＆＃13;

Answer 2

试试这个

* {
  padding: 0;
  margin: 0;
}

html, body {
  height: 100%;
}

.outer {
  display:flex;
  justify-content:center;
  align-items:center;
}

.inner {
  background: #ccc;
  width: 400px;
  height: 600px
}

<div class="outer">
  <div class="inner"> I'm a block-level element centered vertically within my parent.</div>
</div>

更多信息：https://css-tricks.com/centering-css-complete-guide/

CSS VH中心生成器：http://howtocenterincss.com/

垂直中心元素，不会在屏幕外无法访问

2 个答案: