[SOLVED] How to center button in footer bar or header bar

[EricDosReis]

I'm trying to center a button in a footer bar, but I can't. I tried many techniques, but nothing works.

I tried margin auto technique:

    .button {
         display: block;
         float: none;
         margin-left: auto;
         margin-right: auto
     }

I tried position absolute technique:

.button {
     position: absolute;
     left: 0;
     right: 0
 }

I tried set display flex to footer bar:

    .bar-footer {
         display: flex
    }

    .button {
         align-self: center
     }

Look the image bellow: https://cloud.githubusercontent.com/assets/6003424/8885036/72caa55e-3232-11e5-92a1-2ffea30cf16d.jpg

Someone can help me?

[EricDosReis]

Okay, I solved my problem creating my own footer bar. Here is the code:

Footer bar code:

<ion-footer-bar class="footer-bar-custom">
    <button class="user-profile-button footer-bar-item button button-clear icon">
        <img class="user-image rounded" src="../img/user-photo.jpg" alt="User Photo">
    </button>

    <a class="footer-bar-item button button-clear icon button-icon ion-grid icon-center"
        data-ui-sref="home">
    </a>

    <button class="footer-bar-item button button-clear icon button-icon ion-android-more-vertical icon-right">
    </button>
</ion-footer-bar>

Footer bar CSS custom settings:

.footer-bar-custom {
    background: #455D87;
    color: #F6F7F0;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: horizontal;
    flex-direction: horizontal;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: space-between;
    height: 44px;
    width: 100%;
    position: absolute;
    bottom: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    z-index: 5
}

.footer-bar-item {
    display: block;
    font-size: 17px;
    height: 100%;
    max-width: 150px;
    overflow: hidden;
    text-decoration: none;
    white-space: nowrap
}

    .footer-bar-custom.bar > .button + .button:last-child {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto
    }

Modifiers classes

.icon { width: 36px }

.icon-left { text-align: left }

.icon-center { text-align: center }

.icon-right { text-align: right }

Ionic custom CSS settings:

a.button .icon:before,
a.button.icon:before,
a.button.icon-left:before,
a.button.icon-right:before { margin-top: 0 }

This is the result:

Thank for building Ionic, guys!