[Div center inside ion-slide] Div isnt centered on tablet, while works good on browser and smartphone


#1

I want text on each slide to be centered, while it works and is displaying properly on my smartphone (android) and in web browser, it looks weird on tablet (also android), like it has fixed margin-left styles.

div styles:

    div.container {
    height: 100%;
    position: relative
}

div.container p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) 
}

and my home.html

	<ion-content>
		<ion-slide-box on-slide-changed="slideHasChanged($index)">
  		<ion-slide>
   		 	<div class="slider-blue">
   		 		<div class="container">
   		 		<p>komunikat powitalny<br>
   		 			komunikat powitalny<br>
   		 			komunikat powitalny
   		 		</p>
   		 		</div>

   		 	</div>
  		</ion-slide>
		<ion-slide>
		    <div class="slider-blue">
   		 		<div class="container">
   		 		<p>komunikat o tym <br>
   		 			ze wszystko robisz <br>
   		 			na własną odpowiedzalność
   		 		</p>
   		 		</div>

   		 	</div>
		</ion-slide>
		<ion-slide>
		    <div class="slider-blue">
   		 		<div class="container">
   		 		<p>W razie jakichkolwiek zastrzeżeń <br>
   		 			skontaktuj się z nami poprzez formularz kontaktowy
   		 		</p>
   		 		</div>

   		 	</div>
		</ion-slide>
		</ion-slide-box>
	</ion-content>
</ion-view>

Here you can see how it is displaying on my devices:
browser: http://imgur.com/rCRlWxm
smartphone: http://imgur.com/DKTZWs3 / http://imgur.com/emCZkZ7
and tablet: http://imgur.com/2WJ9bTo / http://imgur.com/QgDjsB9

Can someone suggest how to fix it?