A solution for vertically and horizontally centering a content does not work with "ion-view"

ionic-v1
1

A solution at http://codepen.io/mhartington/pen/tAeJg works with the ‘ion-content’ directive. But it does not work if I use it with the ‘ion-view’ directive.

My code looks like this:

<ion-view title="Home" >
<ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>

<ion-content class="has-header" class="center">
    <h1>Centered Content - Hello World</h1>
</ion-content></ionview>

CSS is:

.center {
border: 1px solid red;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-moz-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: center;
-moz-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;}

The CSS above works well when it is used with ion-content directive and NO ion-view. But, when the above CSS is used with the ‘ion-view’ and ‘ion-content’ directives like the code above, it does not center the content. Why?

What is the solution to center the content under the ion-view directive?

1 Like
2

I found a solution.

The problem was having two class="…" in the ion-content directive as follows:
I did not realize there were two class attributes.

<ion-content class="has-header" class="center">

The solution is modifying the class attribute as follows:

<ion-content class="has-header center">

OR

<ion-content class="enter">

Now centering content vertically and horizontally works.

3

Thank you very much for sharing the solution. I was in the same problem in my website http://www.essayshop.org and now it is solved.