center floating div horizontally

Question

I want a horizontally centered "floating" div, i.e. one that always is on top of the screen even if the user scrolls around.

With the following CSS I get the div centered completely on the left:

#guiBar {
margin-left: auto;
margin-right: auto;
position: fixed;
}

margin: 0 auto doesn't help either (presumably because that doesn't work together with position: fixed ?

I don't really care how the solution works so javascript or some html5 trickery would be just as fine as pure css. I already tried the solution found here from starx but that also doesn't seem to work with position: fixed. there's also this which doesn't work either (i.e. it's left centered - not sure if a number of <input class="guiButton" type="image" src="/icons/some.png" /> have a fixed size by his definition.)

Joseph Marikle · Accepted Answer · 2012-01-05T19:42:32.867

10

If your element is a fixed width (for instance width:400px) you can use the left and top attributes along with the margin attributes:

#guiBar
{
    position:fixed;
    left:50%;
    margin-left:-200px; /*half the width*/
}

Demo: http://jsfiddle.net/VtqQD/1/show
Source: http://jsfiddle.net/VtqQD/1

EDIT: Thanks to Xander for pointing out the question was about horizontal positioning only.

edited Jan 05 '12 at 19:42

answered Jan 05 '12 at 19:28

Joseph Marikle

76,418
17
112
129

@Xander ah! very correct! I got ahead of myself it seems... EDIT: fixed. Thank you for pointing that out :) – Joseph Marikle Jan 05 '12 at 19:32
Thanks, I'm usually far away from the client side so I'm sure that was a really silly question, well I'm learning as I go. – Voo Jan 05 '12 at 19:41
@Voo no, not a silly question at all. It was a good question. Glad I could help. :) – Joseph Marikle Jan 05 '12 at 19:42

Tank · Answer 2 · 2012-01-05T19:46:31.097

2

html

<div id="subject">
    <div id="predicate">
    Read Me!
    </div> 
</div>

css

#subject {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
}

#predicate {
    position:relative;
    top:50%;
    margin:-20px auto auto auto; /*half of height*/
    width:140px;
    height:40px;
    background:#b4da55;
}

try it out http://jsfiddle.net/RfRAb/

edited Jan 05 '12 at 19:46

answered Jan 05 '12 at 19:37

Tank

1,006
7
17

score 1 · Answer 3 · answered Jan 05 '12 at 19:26

You can use use javascript use scrollHieght and scrollWidth to find the height and width of parent div. Then used those values divided by two to get the values of the center of the div. Then offset it by the dimensions of the div you are wanting to lay on the top.

If you want the center of the entire screen/window use window.innerHeight and window.innerWidth then divide by two and offset by your div.

score 0 · Answer 4 · answered Jan 05 '12 at 19:25

0

You would simply layer your element it with:

  z-index: 9999;

This would guarantee you keep the box on top (z axis), then you just position it wherever you want x/y axis

Reference: Adding z-index MDN

answered Jan 05 '12 at 19:25

Jakub

20,418
8
65
92

I already use z-indizes to make sure a click/touch event gets to the right element, but I don't see how this helps me center the floating div? – Voo Jan 05 '12 at 19:28
you define a width/height to your div, right now you have no dimensions (at least from your example) – Jakub Jan 05 '12 at 19:29
By using my javascript below it doesn't matter the size of your divs or window. It can be used for both fixed and fluid layouts because javascript is finding the size of the window/div after it has loaded. – user982853 Jan 05 '12 at 19:34

score 0 · Answer 5 · answered Jan 05 '12 at 19:34

I made a tiny example:

<html>
<head>
    <style type="text/css">
        body { margin: 0; }
        #wrapper { width: 500px; margin: 0 auto; } 
        #top { margin: 0 auto; width: inherit; background: red; position: fixed; }
    </style>
</head>
<body>
<div id="wrapper">
    <div id="top">
        foo
    </div>
</div>
</body>
</html>

I hope it will help you!

center floating div horizontally

5 Answers5