0

div.one and div.two are inside div.wrap. I want to center div.one vertically and horizontally, also center div.two horizontally at the bottom of div.wrap. I can use table for it, but feeling like Flexbox is a better way.

<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

7537247
  • 303
  • 5
  • 19
  • 1
    Is [**this**](https://jsfiddle.net/rickyruizm/05v0kfao/) what you are trying to achieve? – Ricky Ruiz Oct 18 '16 at 18:55
  • 1
    I think it is, you should read [**this**](http://stackoverflow.com/questions/32551291/in-css-flexbox-why-are-there-no-justify-items-and-justify-self-properties/33856609). – Ricky Ruiz Oct 18 '16 at 18:58
  • 1
    Yes. Thank you. I thought I tried this last night, didn't work. anyway, thanks man. And, thank you. I will read the link you sent. – 7537247 Oct 18 '16 at 18:58
  • 2
    possible duplicate: http://stackoverflow.com/q/36191516/3597276 – Michael Benjamin Oct 18 '16 at 19:26

0 Answers0