How to center horizontally a position: absolute elment on a position: fixed container

Issue

I need to center horizontally a button with aboslute position (because it must keep on top when to click and launch overlay and click to close overlay) on a position fixed topbar, here is the code:

.topbar {
    text-align: center;
    min-width: 100%;
    height: 50px;
    background-color: #29343a;
    position: fixed;
    top: 0;
}

.button {
    display: inline-block;
    margin-right: auto;
    margin-left: auto;
    width: 60px;
    height: 50px;
    cursor: pointer;
    background-color: #00c1e2;
    border-bottom: 2px solid #00a8c6;
    z-index: 100;
    position: absolute;
}

.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(153,204,51,0.9);
}

Thats is just the css of the three parts, the website is more complex but i think that 3 parts are the key. the topbar must be fixed on top, the buton have to be centered into the topbar div, and the overlay launch and the buttop keeps on top of the overlay.

What is working: the overlay works fine and the button keeps on top but its not horizontally centered on the topbar.

How i can hack this?

Solution

You could to the left:0 and right:0 trick.

.button {
    display: inline-block;
    margin-right: auto;
    margin-left: auto;
    width: 60px;
    height: 50px;
    cursor: pointer;
    background-color: #00c1e2;
    border-bottom: 2px solid #00a8c6;
    z-index: 100;
    position: absolute;
    left: 0; /*added*/
    right: 0; /*added*/
}

Or do the left:50% with negative left margin (half width).

.button {
    display: inline-block;
    width: 60px;
    height: 50px;
    cursor: pointer;
    background-color: #00c1e2;
    border-bottom: 2px solid #00a8c6;
    z-index: 100;
    position: absolute;
    left: 50%; /*added*/
    margin-left: -30px; /*added*/
}

Or use CSS3 transform.

.button {
    display: inline-block;
    width: 60px;
    height: 50px;
    cursor: pointer;
    background-color: #00c1e2;
    border-bottom: 2px solid #00a8c6;
    z-index: 100;
    position: absolute;
    left: 50%; /*added*/
    transform: translateX(-50%); /*added*/
}

Answered By - Stickers