Vertical align

I know that is an old subject, but I still having problems with the solutions I found on this forum related with vertical align.

When I sucessyful manago to center the content , I lost control of the width property. The full block button get the size of it interior text.

That is the html:

<ion-view title="HOME" hide-nav-bar="true">
    <ion-content padding="true" class="homeBackground center">

                <button class="button button-block button-energized">

The css:

    border: 2px solid #000000;
    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;

Have you tried just using a column div? Your full width button will only be full width if there is no padding.

ionic scss uses flexbox… so if you style your app with scss you can use flex-box layout to reach your aims :wink:

I tried and nothing :frowning: