How to horizontally center a floating element of a variable width?

Question

Edit: I already have this working using a containing div for the floating element and specifying a width for the container (then use margin: 0 auto; for the container). I just wanted to know whether it can be done without using a containing element or at least without having to specify a width for the containing element.

possible duplicate of [**How to center float elements?**](http://stackoverflow.com/questions/4767971/how-to-center-float-elements) — Arnaud Le Blanc, Jun 21 '13 at 10:05

Leyu · Answer 1 · 2014-12-01T09:39:51.120

91

Assuming the element which is floated and will be centered is a div with an id="content" ...

<body>
<div id="wrap">
   <div id="content">
   This will be centered
   </div>
</div>
</body>

And apply the following CSS:

#wrap {
    float: left;
    position: relative;
    left: 50%;
}

#content {
    float: left;
    position: relative;
    left: -50%;
}

Here is a good reference regarding that.

edited Dec 01 '14 at 09:39

answered Aug 05 '09 at 10:06

Leyu

2,687
2
23
27

You can also try `margin-left` instead of `left` and `position: relative`. Margin-left worked for me on the -50% element. – Muhd Dec 01 '11 at 00:13
yea - but what is the added value @muhd? – marcusklaas Dec 27 '11 at 22:58
@marcusklaas, the added value is that it may work in cases where the posted solution does not, or may be easier to implement. I don't remember much about this since it was a month ago. – Muhd Dec 29 '11 at 00:46
I dig the solution, but you might need overflow-x: hidden to prevent horizontal scrollbars. That took a bit to figure out. – gtd Apr 03 '12 at 12:22
Link to "reference" appears dead. – Pang Feb 28 '19 at 02:51

score 75 · Answer 2 · 2012-04-10T23:09:08.903

75

.center {
  display: table;
  margin: auto;
}

edited Apr 10 '12 at 23:09

answered Apr 10 '12 at 22:54

5

this worked out much better for me than the accepted answer, try both! – Chris Camacho Mar 25 '13 at 18:08
1

I prefer this method better as well, but it works on IE8+ so if you need IE7 you should use the accepted answer. – isapir May 05 '13 at 20:26
Thanks- saved my time, really! – Rossitten Aug 05 '15 at 18:48

score 7 · Answer 3 · edited Jan 02 '14 at 17:32

7

You can use fit-content value for width.

#wrap {
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  margin: auto;   
}

Note: It works only in latest browsers.

edited Jan 02 '14 at 17:32

Mark

6,762
1
33
50

answered Aug 13 '13 at 10:17

Fizer Khan

88,237
28
143
153

Vianney Sserwanga · Answer 4 · 2018-05-01T17:10:54.350

5

This works better when the id = container (which is the outer div) and id = contained (which is the inner div). The problem with the highly recommended solution is that it results in some cases into an horizontal scrolling bar when the browser is trying to cater for the left: -50% attribute. There is a good reference for this solution

        #container {
            text-align: center;
        }
        #contained {
            text-align: left;
            display: inline-block;
        }

edited May 01 '18 at 17:10

answered Nov 24 '14 at 11:47

Vianney Sserwanga

313
2
10

This actually worked great. The combination of `display: inline-block` and `text-align: center` does the trick. – Joshua Pinter Apr 09 '18 at 22:07

score 4 · Answer 5 · answered Aug 05 '09 at 09:31

4

Say you have a DIV you want centred horizontally:

 <div id="foo">Lorem ipsum</div>

In the CSS you'd style it with this:

#foo
{
  margin:0 auto; 
  width:30%;
}

Which states that you have a top and bottom margin of zero pixels, and on either left or right, automatically work out how much is needed to be even.

Doesn't really matter what you put in for the width, as long as it's there and isn't 100%. Otherwise you wouldn't be setting the centre on anything.

But if you float it, left or right, then the bets are off since that pulls it out of the normal flow of elements on the page and the auto margin setting won't work.

answered Aug 05 '09 at 09:31

random

9,774
10
66
83

1

The only issue here is that you have to explicitly set the width; `width: auto;` doesn't work (AFAIK). – You Aug 05 '09 at 09:37
Correct, you do have to set something as the width. But the question was asking about variable width, hopefully that's not another word for auto and instead some fluctuating value or relative amount, like em's or % – random Aug 05 '09 at 09:43
Thanks for your answer, actually I don't have a problem with centering elements, what I'm trying to do is center a "floating element". I know this is not possible in CSS but was hoping somebody might have a hack that can work for this, I even tried to use a table but that didn't work too. Unfortunately in my scenario there's no way to make the element not floating, I need this for specific reasons. – Waleed Eissa Aug 05 '09 at 09:44
This solution helped me out on a project. Thanks. – Julian Oct 29 '10 at 03:50

score 4 · Answer 6 · edited Jun 21 '14 at 18:25

The popular answer here does work sometimes, but other times it creates horizontal scroll bars that are tough to deal with - especially when dealing with wide horizontal navigations and large pull down menus. Here is an even lighter-weight version that helps avoid those edge cases:

#wrap {
    float: right;
    position: relative;
    left: -50%;
}
#content {
    left: 50%;
    position: relative;
}

Proof that it is working!

To more specifically answer your question, it is probably not possible to do without setting up some containing element, however it is very possible to do without specifying a width value. Hope that saves someone out there some headaches!

score 3 · Answer 7 · edited Jan 02 '14 at 17:34

3

Can't you just use display: inline block and align to center?

Example.

edited Jan 02 '14 at 17:34

atiquratik

1,296
3
27
34

answered May 07 '11 at 19:46

Kai

451
4
5

`inline-block` good solution! at least you got +1 after 7 years ;) – dimpiax Dec 07 '18 at 11:30
This is what worked good for me, thank you! – Scott Milella Jan 09 '23 at 20:56
`inline-block` +1 after 12 years! – Gotfredsen May 12 '23 at 09:12

lior ben yosef · Answer 8 · 2020-11-08T00:31:46.127

0

for 50% element

width: 50%;
display: block;
float: right;
margin-right: 25%;

edited Nov 08 '20 at 00:31

answered Nov 08 '20 at 00:07

lior ben yosef

144
1
6

How to horizontally center a floating element of a variable width?

8 Answers8

Linked