Easy way to center variable width divs in CSS

Question

I'm trying to center a Div that will have varying width's (based on content of a website).

I read about a relative positioning technique here:

http://www.tightcss.com/centering/center_variable_width.htm

But I thought there has to be an easier way to do it?

Does this achieve the same thing? http://stackoverflow.com/questions/618097/how-do-you-easily-horizontally-center-a-div-using-css — johnsnails, Jan 04 '16 at 22:18
@eouw0o83hf ca we know what is the answer you was waiting for since 1998 that deserve the bounty ?? — Temani Afif, Mar 20 '18 at 08:21
@TemaniAfif sorry, I didn't realize it wouldn't let me assign immediately. It's the accepted one. — eouw0o83hf, Mar 20 '18 at 21:25

score 36 · Accepted Answer · answered Sep 01 '11 at 06:39

36

That's a pretty solid method that should work well in most browsers. It's not really that complex when you break it down. Here's a basic example:

<style type="text/css">
#hideoverflow { overflow: hidden; }
#outer { position: relative; left: 50%; float: left; }
#inner { position: relative; left: -50%; float: left; }
</style>

<div id="hideoverflow">
    <div id="outer">
        <div id="inner">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id velit vel  augue fringilla rhoncus at et odio. Suspendisse potenti. Aliquam justo  libero, commodo ut iaculis in, placerat vel purus.
        </div>
    </div>
</div>

answered Sep 01 '11 at 06:39

Joe Landsman

2,177
13
9

Hmm yeah it's not as complex when you put it like that. I'll try some of the other methods mentioned here and see which one "sticks" :) Thanks. – Talon Sep 01 '11 at 06:46
3

Jesus, what are you? Some kind of ninja? This is great. – MichaelClark Jan 03 '17 at 20:51
2

I can feel it coming in the air tonight, oh Lord / And I've been waiting for this answer for all my life, oh Lord – eouw0o83hf Mar 20 '18 at 01:50
@eouw0o83hf is this answer ? – Temani Afif Mar 20 '18 at 08:37

score 35 · Answer 2 · answered Sep 01 '11 at 06:42

35

@Talon; you can do it like this http://jsfiddle.net/sandeep/7PXQF/

CSS:

.container{
background-color:red;
    text-align:center;
}
.center{
background-color:yellow;
display:inline-block;
text-align:left;}

HTML:

<div class="container">
    <div class="center">
      <p>This is a div with an much wider width, to make the yellow div go off the page to the right.  We'll type a bit more to be sure.</p>
      <p>Most people will see a horizontal scroll bar on the bottom, unless their screen is very wide.</p>
    </div>
  </div>

answered Sep 01 '11 at 06:42

sandeep

91,313
23
137
155

1

At least it get's rid of one div than the other method, i'll test it in different browsers. – Talon Sep 01 '11 at 06:47
2

note: `inline-block` not supported in `IE5` `IE6` `IE7` for `div` element – Sharky Mar 25 '14 at 10:25
Update: IE5, 6, 7 all discontinued and irrelevant now. – Mike Kormendy Sep 05 '17 at 22:21

score 6 · Answer 3 · answered Mar 20 '18 at 07:42

6

Well, it can't get any simpler than this and has full support on all browsers; doesn't even need a container:

.centered {
  display:table;
  margin:0 auto;
}

<div class="centered">
  content
</div>

Here is a working fiddle: https://jsfiddle.net/1tnprnoz/

answered Mar 20 '18 at 07:42

scooterlord

15,124
11
49
68

I proposed the same solution at first (see my revision), but removed it as I realized the question is really about a container and a separate content div of unknown size, may be editor generated code or something. In that case to add `centered` class to the inner div will require JavaScript. – Munim Munna Mar 20 '18 at 08:30
Although it doesn't need a container, doesn't mean it can't work inside one. – scooterlord Mar 20 '18 at 08:42
I know i can work inside one, but how will you add the centered class to it? Please read the question again. It says content from another site. Do you think the guy who gave the accepted answer didnot know `margin:auto`? Or the auto margin did not exist then? Then why did he took so much troubles? You are misunderstanding the question buddy. – Munim Munna Mar 20 '18 at 08:51
I understood the question perfectly, and now that I read it again, I still understood the same thing. There is nowhere stated 'from another site'. What does this even mean anyway? Then it would be a CSS targetting issue. Also I don't know what anyone knows or does not know. – scooterlord Mar 20 '18 at 09:36
Sorry for all that, may be you are right, only the OP knows, I was just suggesting, forget it. – Munim Munna Mar 20 '18 at 09:43
1

This is really great! And actually it works! The best solution ever! – Henry Brewer Sep 14 '18 at 19:13

Munim Munna · Answer 4 · 2018-03-20T08:26:13.333

0

Now with flex-box you can easily achieve this with justify-content: center;.

#container{
  background: gray;
  display: flex;
  justify-content: center;
}

<div id="container">
  <div id="content" style="width: 200px; padding: 5px; background: #ffa637;">
    This is a centered div This is a centered div This is a centered div This is a centered div
  </div>
</div>

This can also be achieved by applying margin: auto to the containers child selector #container>*.

#container{
  background: #c7c7c7;
}
#container>*{
  margin: auto;
}

<div id="container">
  <div id="content" style="width: 200px; padding: 5px; background: #ffa637;">
    This is a centered div This is a centered div This is a centered div This is a centered div
  </div>
</div>

Note: content div is styled inline as these styles are generated styles and are out of the scope of this question.

edited Mar 20 '18 at 08:26

answered Mar 20 '18 at 03:12

Munim Munna

17,178
6
29
58

2

Maybe because the question asks for a variable width div. This puts it at 200px. – Ekkstein Aug 08 '18 at 15:20
1

The style properties of content div is unknown, the width can be anything *based on content of a website* (as OP said). The 200px width is set here for demo purpose only, the solution works for any width. – Munim Munna Aug 08 '18 at 18:14
I just checked and the solution with display: flex works for variable widths. The second solution doesn't work with div#content{style: 'width: auto;'} though. – Ekkstein Aug 08 '18 at 20:38
1

@Ekkstein, `
` is a block-level element, so width auto makes it fill the entire container width.
– Munim Munna Aug 08 '18 at 21:26
1

@Ekkstein the question is about **content of a website** with variable width i.e the content will have a width specified so needs to be centered. If the content does not have any width specified there is no point of centering it. I guess you are looking at the wrong question. If you explain what are you trying to do, I can direct you to the right question. – Munim Munna Aug 09 '18 at 14:52

Easy way to center variable width divs in CSS

4 Answers4

Linked