Flexbox：屏幕中间的居中元素

Question

如果我要使用flexbox将一个元素置于屏幕中间，这段代码最优雅吗？

http://codepen.io/vennsoh/pen/wEAmz

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和height + weight 100％来实现这一点。

Answer 1

你必须使用position：absolute，因为元素的默认值是position：relative，在这种情况下，没有什么是相对的到，因为你已经将flex容器作为body。

您的代码可以正常工作，但是有一个命令可以在实际的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是所有flexbox的好资源。