9

I want div to be center horizontally, css code is this:

<style type="text/css">
#footer{
    position: fixed;
    bottom: 20px;
    background-color: red;
    width:500px;
            margin: auto;/*left:auto; right:auto;*/
}
</style>

and html code:

<body>
<div id="footer">hello world</div>
</body>

I think there is no need to explain my css code, it is almost self-explanatory, but the div is not center horizontally, is there any way to make this? Thanks in advance.

hiway
  • 3,906
  • 10
  • 34
  • 57

4 Answers4

21

Try this

#footer{
    position: fixed;
    bottom: 20px;
    background-color: red;
    width:80%;
    margin: 0 0 0 -40%;
    left:50%;
}

JS Fiddle Example

The point to be noted here is, the negative margin-left of exactly half value of width and set the left 50 % of the body

Sachin
  • 40,216
  • 7
  • 90
  • 102
  • 1
    your answer and @gregbenner's are both use this 'trick', first of all, thank you. I also just searched google and others also use this way, I am wondering if there is a no `trick` way to do it? – hiway Apr 17 '13 at 11:40
  • This is actually a nice solution. But it is not exactly what he wants to do. This way the footer will become responsive and won't have it's fixed width of 500px. – Nick N. Apr 17 '13 at 11:41
  • ya @Nick, but I have also mentioned that the trick behind it. (s)he can easily change the dimensions as (s)he likes. – Sachin Apr 17 '13 at 11:46
  • @Sachin yep, you are right. There is probably no other way than using a trick like this or a container DIV. – Nick N. Apr 17 '13 at 11:47
  • So @HiwayChe accept the answer you have used. Because there are probably no better answers to give. – Nick N. Apr 17 '13 at 11:49
  • @Nick, ok, I prefer container using DIV to using trick, but if I use the former, I have to change too many html code(adding container div), that's too horrible, I will pay attention to this question next time. After all thank everybody. – hiway Apr 17 '13 at 11:57
  • instead of setting `margin-left`, we can also set `transform: translateX(-50%);` This way we don't need to calculate half the value every time – manpreet Sep 13 '17 at 10:33
8

This should work well for you. It works by adding a container div.

<style>

#footer-container{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

#footer
{
    width:500px;
    margin:0 auto;
    margin-bottom:20px;
    background-color:red;
}
</style>


<div id="footer-container">
      <div id="footer">hello world</div>
</div>
Nick N.
  • 12,902
  • 7
  • 57
  • 75
  • the "text-align:center;" will cause the text to center and IE6 to work. if you don't want to center, but like IE6 to work. add text-align:left to the #footer div. – Nick N. Apr 17 '13 at 11:51
6

Put another div inside it with relative position, margin: auto. Give the fixed one 100% width.

Otherwise you can hack it with negative margin 'trick'

div { 
    position: fixed;
    left: 50%;
    width: 500px;
    margin-left: -250px;
}
Greg Benner
  • 668
  • 7
  • 15
4

If you're working with modern browsers you can use the flexbox layout module: http://caniuse.com/#feat=flexbox.

Flexbox documentation: developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
Note: Can't post more than two links due to my rep.

JSFiddle.

(Using a footer tag instead of a div#footer as it's simpler.)

<div id="footer-container">
  <footer>hello world</footer>
<div>

#footer-container {
  bottom: 20px;
  position: fixed;

  display: flex;
  justify-content: center;
  width: 100%;
}

footer {
  width: 500px;

  background-color: red;
}

justify-content: center; 'centers' #footer-container's children, which is just the footer element in this case.

This is very similar to Nick N.'s solution, except that you don't have to reset the text-align property on the footer, and that this is probably the non-'trick' way that you wanted.

The accepted solution is slightly off because the footer's width in that case is variable (80%) instead of at 500px.

To other readers, if your parent is a form element, and the child is an input element, use flex: 1; on the input (child) element, and use max-width: 500px; instead of width: 500px;. Using flex: 1; should make the input element expand to fill the form element's width, which it might not otherwise do.

xd1le
  • 182
  • 2
  • 8