Flexbox：将元素居中于屏幕中间

如果我要将一个元素置于屏幕中间flexbox，以下方法是最优雅的吗？

HTML

<div class='btn'></div>

CSS

body{
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
}

.btn{
  width: 10rem;
  height: 10rem;
  background-color: #033649;
  margin: auto;
}

看来我必须使用position: absolute and 身高+体重100%为了达成这个。

您必须使用position:absolute，因为元素的默认位置是position:relative，在这种情况下，没有什么是相对的to因为你已经将弹性容器作为主体了。

您的代码可以正常工作，但是有一个命令可以将对象置于实际的 Flex 模型本身中，如下所示：

body{
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center; /*centers items on the line (the x-axis by default)*/
  align-items: center; /*centers items on the cross-axis (y by default)*/
}

如果这样做，您可以从 .btn 类中删除 margin: auto ，以便在代码中留出更多回旋空间。

Here http://css-tricks.com/snippets/css/a-guide-to-flexbox/是有关 Flexbox 的所有内容的良好资源。