Flexbox垂直和水平居中div1，在父div的底部水平居中div2。

Question

div.one和div.two位于div.wrap内。我希望纵向和横向居中div.one，并在div.two的底部水平居中div.wrap。我可以使用table，但感觉像Flexbox是更好的方法。

<div class="wrap">
  <div class="one box">one</div>
  <div class="two box">two</div>
</div>


 .wrap {
   border:1px solid gray;
   padding: 30px;
   height: 300px;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .one {
   padding: 10px;
   border: 1px solid red;
 }

 .two {
   padding: 10px;
   border: 1px solid red;
   align-self: flex-end;
 }

jsFiddle