display:flex / step2

by Kim Ara

HTML

<div id="wrap1" class="div-wrap">
  <div class="item1">1</div>
  <div class="item2">2<p>22</p></div>
  <div class="item3">3<p>33</p></div>
</div>

CSS

*{margin:0;padding:0}
.div-wrap{width:500px;height:300px;color:#fff;text-align:center}
.div-wrap div{width:33.3%;height:100%}
.item1{background:red;align-self:center}
.item2{background:green}
.item3{background:blue}
.div-wrap p{width:100%}

#wrap1{display:flex;align-items:center}
#wrap1 .item2{display:flex;align-items:center}

#wrap1 .item3{display:flex}
#wrap1 .item3 p{align-self:center}