要素を真ん中におく

このように真ん中におきたい時
    <div class="ion-text-center my-class-parent">
        <ol class="my-class-child">
          <li>hi</li>
          <li>hi2</li>
        </ol>
    </div>
.my-class-parent {
  height: 100%;
  position: relative;
}

.my-class-child {
  position: absolute;
  left: 50%;
  top:30%;
  padding-left: 0;
}
my-class-parentでBody要素に対する長さを100%に指定しており、それに対してmy-class-childで場所を指定している、

2つの要素を横に並べたい時

並べたい要素をまとめて囲ったTagにdisplay:flexをつけてやる.あとはboxの幅を100%で指定しているので,Imgで幅を指定したらそれを埋めてくれるようになる
                      <div class="flex">
                      <img src="assets/img/syabani.jpg" alt="" >
                      <div class="box">{{welcomeMessage}}</div>
                      </div>
  .flex{
    display: flex;
    /*justify-content: center;*/
  }

  .flex img{
    max-width: 100%;
    width: 30%;
    height: auto;
  }

  div.box{
    width: 100%;
    background-color:#CCCCFF;
}