How to center a div with position:Fixed?

Asked

Viewed 5,323 times

7

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

  • If you put margin-left e right com auto also http://jsfiddle.net/filadown/9d52oyty/3/

5 answers

9


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';
}
  • 1

    Thank you Sergio, unfortunately IE8 torments me in this case, I will just adapt to my practical scenario, once again thank you.

  • 1

    @Douglasdossantos added more info to the answer to fix the position if Browser does not support Calc()` in CSS as @bfavaretto suggested.

4

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.

  • Thank you very much bfvaretto, but unfortunately it has q work in IE8( bag! ), I really will have to use javascript to resolve but thank you so much for the help.

2

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

1

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'
});

0

A modern and Javascript-exempt alternative is as follows:

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

Browser other questions tagged

You are not signed in. Login or sign up in order to post.