How to center a div with position:Fixed?

Question

I wonder if it is possible to centralize a div with the position:fixed ? Currently I tried to centralize using the margin:0 auto but it didn’t work... unfortunately as the width of my div Fixed will be dynamic I can’t use the left and margin-left negative T.T

CSS code:

.container {
    background: #F00;
    width:100%;
    height:300px;    
}

.fixo {
    width:100px;
    height:50px;
    background:#000;
    position:fixed;
    top:0px;
    margin:0 auto;
}

HTML code:

<div class="container">
    <div class="fixo"></div>
</div>

Follow the code with the example: http://jsfiddle.net/9d52oyty/

Thank you in advance

Answer 1

You have two options:

Javascript:

var container = document.querySelector('.fixo'),
    w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;

container.style.top = (y / 2) - (container.clientHeight / 2) + 'px';
container.style.left = (x / 2) - (container.clientWidth / 2) + 'px';

Example: http://jsfiddle.net/j6qvryz2/1/

CSS:

.fixo {
    width:100px;
    height:50px;
    background:#000;
    position:fixed;
    top:50%; left: 50%;
}

Example: http://jsfiddle.net/j6qvryz2/

The javascript version calculates the height and width of the screen, divides by half and subtracts half the width or respective height of the element.

The CSS version is approximate. You can adjust if the measurements are +/- static. For modern browsers the solution from @bfavaretto is ideal.

---

Edit:

In cases where it is necessary to support anti-user browsers I suggest using Feature-Detection. That is, detect if the browser supports the calc() in the CSS (as @bfavaretto suggested), and if no do positioning via Javascript.

Example:

CSS

.fixo {
    width:100px;
    height:50px;
    background:#000;
    position:fixed;
    top:0;
    left: calc(50% - 50px);
}

Javascript

// usando o feature detect do Modrnizer
var calc = (function(){
    var dummy = document.createElement('div');
    var props = ['calc', '-webkit-calc', '-moz-calc', '-o-calc'];
    for (var i=0; i<props.length; ++i) {
        var prop = props[i];
        dummy.style.cssText = 'width:' + prop + '(1px);';
        if (dummy.style.length)
            return prop;
    }
})();

if (!calc) {
    var container = document.querySelector('.fixo'),
        w = window,
        d = document,
        e = d.documentElement,
        g = d.getElementsByTagName('body')[0],
        x = w.innerWidth || e.clientWidth || g.clientWidth,
        y = w.innerHeight|| e.clientHeight|| g.clientHeight;

    container.style.top = (y / 2) - (container.clientHeight / 2) + 'px';
    container.style.left = (x / 2) - (container.clientWidth / 2) + 'px';
}

Answer 2

If your browser gives support you can do it like this:

left: calc(50% - 50px);

^{http://jsfiddle.net/55d4vr5y/}

That is, position the div on the left half the container width minus half the width of the fixed div.

Answer 3

If the width of the div is going to be dynamic, da to do only with CSS, just fix the container with 100% width, height 0 (so the leftovers are not over the links of the page) and align the centered text, and the div with the content places as inlineblock and define the rest of the properties, something like that:

.container {
    position:fixed;
    top:0;
    width:100%;
    height: 0;
    text-align: center;
}
.container .fixo {
    display: inline-block;
    background:#000;
    color: #fff;
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
}

See working on Jsfiddle

Answer 4

Can be done using CSS only: Jsfiddle

This is the "trick":

top:50%; /* Metade da altura da tela */
left:50%; /* Metade da largura da tela */
margin-top:-25px; /* Metade da altura do elemento */
margin-left:-50px; /* Metade da largura do elemento */

Or with relative dimension, using JS/jQuery: Jsfiddle

$('.fixo').css({
    'margin-top' : '-' + ($('.fixo').height()/2) + 'px',
    'margin-left' : '-' + ($('.fixo').width()/2) + 'px'
});

Answer 5

A modern and Javascript-exempt alternative is as follows:

.container .fixo{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}