如何使用 CSS 使元素垂直居中？

Question

所以我正在努力使用 CSS 将 div 元素垂直居中在另一个 div 中。

我尝试过使用各种CSS属性，例如flexbox和vertical-align，顺便说一下，它们以前对我有用，但没有一个按预期工作。该元素要么停留在父容器的顶部或底部。

请帮忙并提前谢谢你:)

Answer 1

使用

flexbox

实现给定布局的方法是正确的。只需为父 div 添加

justify-content

和

align-items

参数即可。 这是代码示例：

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

CSS

.outer {
  display: flex;
  justify-content: center; 
  align-items: center; 
}