Centered div block fixed but doesn't work on Google Chrome

Question

I have 3 div blocks:

• 1st: left-aligned
• 2nd: center-aligned
• 3rd: right-aligned

The 2nd block (centered) is fixed so whenever user scroll this one is still in the center of the page.

The problem: doesn't work on Google Chrome.

#generic-container {
    width:100%;
    height: 100%;
    text-align:center;
    padding-top: 40px;
}

#generic-left {
    float:left;
    width: calc(50% - 270px);
    /*background: #ff0000;*/
    text-align: left;
    padding: 0 10px;
}

#generic-center {
    display: inline-block;
    padding: 20px;
    width:450px;
    height: 360px;
    /*background: #00ff00;*/
    position: fixed;
    top: 50%;
    margin-top: -180px;
}

#generic-right {
    float:right;
    width: calc(50% - 260px);
    /*background: #0000ff;*/
    text-align: left;
    padding: 0 10px;
}

<div id="generic-container">
    <div id="generic-left">
        aa aa aa aa aa aa 
    </div>
    <div id="generic-center">
        <div>
            bb bb bb bb bb
        </div>
    </div>
    <div id="generic-right">
        cc cc cc cc cc
    </div>
</div>

Answer 1

Maybe this is what you are looking for :

Just removed the "text-align" in #generic-container and "div" inside "generic-center"

Css :

 #generic-container {
    width:100%;
    height: 100%;
    padding-top: 40px;
    border: solid 2px yellow;
}

    #generic-left {
        float:left;
        width: calc(50% - 270px);
        /*background: #ff0000;*/
        text-align: left;
        padding: 0 10px;
        border: solid 2px red;
    }

#generic-center {
    display: inline-block;
    padding: 20px;
    width:450px;
    height: 360px;
    text-align:center;
    /*background: #00ff00;*/
    position: fixed;
    top: 50%;
    margin-top: -180px;
    border: solid 2px green;
}

#generic-right {
    float:right;
    width: calc(50% - 260px);
    /*background: #0000ff;*/
    text-align: left;
    padding: 0 10px;
    border: solid 2px blue;
}

Html :

<div id="generic-container">
    <div id="generic-left">
        aa aa aa aa aa aa 
    </div>
    <div id="generic-center">
        bb bb bb bb bb
    </div>
    <div id="generic-right">
        cc cc cc cc cc
    </div>
</div>

Demo : http://codepen.io/Dilraj7/pen/ZYgNZJ

Answer 2

Is this what you want?

CSS

#generic-container {
    width:100%;
    height: 100%;
    text-align:center;
    padding-top: 40px;
    box-sizing: border-box;
}

#generic-left {
    float:left;
    width: calc(50% - 225px);
    /*background: #ff0000;*/
    text-align: left;
    padding: 0 10px;
    box-sizing: border-box;
}

#generic-center {
    display: inline-block;
    padding: 20px;
    width:450px;
    height: 360px;
    /*background: #00ff00;*/
    position: fixed;
    top: 50%;
    margin-top: -180px; // Beware this rule is confusing
    box-sizing: border-box;
    margin-left: -225px;
    left: 50%;
}

#generic-right {
    float:right;
    width: calc(50% - 225px);
    /*background: #0000ff;*/
    text-align: left;
    padding: 0 10px;
    box-sizing: border-box;
}

DEMO HERE