Carousel middle of the screen in ionic

Ionic Framework ionic-v3
1

I have below code to run carousel in my ionic app

  <ion-slides autoplay="1000" loop="true" speed="500">
      <ion-slide *ngFor="let item of video">
        <img [src] ='item.imge'/>
      </ion-slide>
    </ion-slides>
    <h5>this is the text </h5>
</ion-content>

but the content is displaying like below

how to align them properly, if I write css like below it will display good.
<ion-slide style="height: 100vh;display: block;vertical-align: initial;" *ngFor="let item of video"> and <h3 style="position:absolute;top:350px">Most Viewd</h3>

is it compulsory to write CSS for each item in my page? why should it be like this? please let me know

2

I recommend that you put your slides into a div and style the latter rather then styling slide itself (only when needed)

3

could you please elaborate your answer

4

If you want to position your slides in a page you would choose to put them in a div and apply css styles to your div.

If you have some style just for this page you put them in home-page.scss (for example) but if you have to apply css to many pages you should add your styles to app.scss.

When you put your slide inside a div, it is better to handle width and height of the div and it is easer and simpler.

Let me know if you need more explanation, may though, you should add some code.