I can not fix the view(Ionic2)

Ionic Framework ionic-v3
1

My title changes according to data coming.But header lengths are different and appearance changes.I need to fix the view.These titles are in the middle of the screen.But as the writing length increases, the view is not what I want.I want the titles to be right in the middle of the screen and look like the first pictureWhere did I go wrong?what should I do
image

image

image

home.html

 <ion-row>
       <ion-col col-7>
          <div class="baslikline"></div>
       </ion-col>
       
     </ion-row>
     <ion-row>
       <ion-col col-12 class="baslik">    
         <h3 >{{baslik}}</h3>      
       </ion-col>
     </ion-row>

home.scss

 .header{
    color:white;
    text-align: center;
    position: relative;
    top: -57px;
    font-size: 20px;
    width: auto;
    height: auto;
    clear:both;
  }

  .header h3{
   font-size: 20px;
  }

 .headerline{
    width: 50px;
    height: 47px;
    border-bottom: 3px solid #ef3a4f;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: block; 
    position: relative;
    top: -18px;
  }
2

home.html and home.scss are not connected in any way in your code. On purpose?
That red line should be there?
Where do these appear, in the app header? Or just on the page?

3

This is an Ionic 2 application,these are just some.there is connection. yes it will be red line.The title should be at the top and center of the page