Vertically center a button

ionic-v1
1

I’m trying to vertically center a button.

<ion-view title="Select Image">
<ion-content has-header="true" has-tabs="true">

<div class="row">
  <div class="col">
    <button class="button button-block button-energized">
      button-energized
    </button>
  </div>
</div>

is there a way to do this other than adding empty elements above the button? I know ionic is using flexbox but I’m not sure what I have to do to the button to achieve the desired effect.

2

How does this work for you? Flex bow will let you do this like this but you have to apply it right to the content area.

This is a great GUI way to mess with flex properties and see the css is generates. Plus it will generate prefixed css
http://the-echoplex.net/flexyboxes/

4 Likes
3

@mhartington so to clarify how this works. The <ion-content> tag is given the .scroll-content class by the ionic framework (I’m not seeing that in the markup so I’m assuming). And all the flexbox stuff of that class is centering the inner elements, row etc.

1 Like
4

Correct, scroll-content = ion-content. So applying all the flex box css will take care of everything inside the ion-content.

1 Like
5

I use your snippet to vertically center my content and it works pretty well. The only issue I have is that I can’t find a way to keep the original width of my elements, all of them seems to have a “width:auto” or something similar.
How can I have my elements to be like width:100% of the screen ?
Thanks again for this snippet ! :slight_smile:

EDIT : It did the trick !

.center-content > * {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;

}

7

I realize this post is a bit old, but I was just looking at this and in order to keep the items stretched to be with a 100% width. Here is an alternative:

.center-content > *  {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    }

So the lines being changed are:

8

can you please tell how you vertically centred the button.

9

Maybe I’m missing some thing, but it seems to work, I updated the

2 Likes
10

Check …

may be help you…

11

Thanks mhartington. it helped me a lot…

12

Here is a simple method to align vertically center.

    .center {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute !important;
    margin:0 auto;
    width:100%;
}

HTML

<ion-content class="center">
 Content
</ion>
5 Likes
13

Hope this will help you…Div on Center

Chris

1 Like
14

Works Perfectly! Thanks.

15

You’re a life saver! Thankss :smiley:

16

why we don`t use

i`am center i know there is a reason for using flex boxes and not use center need feedback
17

To vertically center the ion-content contents using a class:

.vcenter {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

codepen
CSS-Tricks Flexbox tutorial

2 Likes
18

Hi @mhartington

I was using the solution here: http://codepen.io/mhartington/pen/gcHeL

It was working well until I updated to Ionic 1.2.4
When using that version on Android devices the content (on the example is the button) is no longer centered but instead appears on top. On IOS it’s still centered.

Do you know if there is some additional change that can be made to make it work again on Android?

Thanks.

19

I am having exactly the same problem.

Do you find any solution?

20

Sadly no. I end up changing the design.