I have a problem with trying to center an ion-item as seen below.It's slightly off-center.

[![enter image description here](https://i.stack.imgur.com/QZRNe.png)](https://i.stack.imgur.com/QZRNe.png)

I have tried `text-align: center` and also change the padding to no padding in ion-content, which doesn't do the trick. 

I have the following html 

```
<ion-content no padding >
 <div  style =" text-align: center !important;"> 
  <ion-item style =" text-align: center;"id="projectTitle" color="transparent">
      <ion-input  placeholder="Project Title" [(ngModel)]="title"></ion-input>
  </ion-item>
  <div style="text-align: center !important" >
     <ion-button color ="transparent">maybe later</ion-button>
  </div>
 </div>
</ion-content>

```

And the css 

```
#projectTitle {
     margin-top: 300px;
     color: white !important;
}

```

Please help me