body上设置flex，无法让item上下左右居中？

html结构

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

.outer通过flex定位后，可以让.inner实现上下左右居中。

.outer {
display: flex;
align-items: center;
justify-content: center;
width: 500px; 
height: 300px; 
border: 2px solid red;
}

.inner {
width: 100px;
height: 100px;
text-align:center;
border: 1px solid black;
}

.inner可以在.outer中上下左右居中，可以得出结论：flex可以让它的item项目（或者说子元素）居中，现在我对body设置flex,.outer是body的item项目吧。

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

为何div.outer没有上下作用居中？（我知道，可以通过加设一个div.wrapper,通过margin让它们一起上下左右居中，这里的问题是为何body设了flex，不起作用？）