0

I have a parent div (for sake of test we'll call it #parent) and a child div (test reasons #child). #parent is absolutely positioned to the bottom of the page, with a fixed width of 100% and a height of 75px.

child is a div that holds dynamic content (being changed with jQuery). Seeing as it is dynamic, the width of the div is always different. What is the most efficient way to center this div horizontally, since the width is always unknown & different? Any help would be awesome.

gsnerf
  • 573
  • 1
  • 4
  • 15
user3076755
  • 5
  • 1
  • possible duplicate of [How to center a div in a div - horizontally?](http://stackoverflow.com/questions/114543/how-to-center-a-div-in-a-div-horizontally) – hkk Dec 07 '13 at 04:54

5 Answers5

2

The correct way to do this would be the following:

#child {
    margin: 0 auto;
}

This sets the top/bottom margins to 0, and then the left/right margins to auto - which means "as large as possible". So you have two equal margins on the left and the right, filling up the space completely, and hence you have a centred div.

This will only work on block elements like divs though - inline elements cannot have auto margins. If you need to centre an inline element (like a span or some text), use text-align: center; on the parent:

#parent {
    text-align: center;
}
Matthew
  • 2,232
  • 4
  • 23
  • 37
1

You could set the margins to: margin: 0, auto;

James Dorfman
  • 1,740
  • 6
  • 18
  • 36
0

Make it display as an inline element and give the parent the property of text-align center problem solved

#parent{
text-align:center;
}
#child{
display:inline-block;
}

Edit:

check how it works http://jsfiddle.net/ECMau/1/

Breezer
  • 10,410
  • 6
  • 29
  • 50
  • how do i get a -1 Vote when its the f*** best answer here, it will adept after any content and always stay in the middle, `margin:0 auto;` wont work if there's no set width set to the child – Breezer Dec 08 '13 at 10:36
  • Wasn't me that downvoted, but if there's no width set to the child then it'll expand to fill the whole parent anyway, because that's what block elements do if they have no width set. In that case, it won't need centring, because it will fill the whole parent. In all other cases there is a fixed width and it works. – Matthew Dec 11 '13 at 06:11
  • @Matthew yes maybe the `margin:auto;` would work for you in this very case and so would mine, diffrence is mine would work on all elements, yours only applies to block elements. But of course you're free to choose whatever answer that fits your needs the best, it's just plain annoying when someone downvotes when you have a perfectly good answer =/ – Breezer Dec 11 '13 at 23:11
0

For fun you could use the CSS Flexible Box Layout Module. Here is a jsFiddle demonstrating what you could do:

See working jsFiddle demo

HTML

<footer>
    <div class="dynamic-content">Here is some child dynamic content</div>
</footer>

CSS

body 
{
    background: #ccc;
}
footer 
{
    /*  As of August 2012, only supported in Chrome 21+ */
    display: -webkit-flex;
    display: flex;
    
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    
    background: #232323;
}
footer .dynamic-content 
{
    flex: 1;
    
    padding: 10px;
    margin: 0 auto;
    
    background: #545454;
    color: white;
    font-family: verdana;
}
Community
  • 1
  • 1
Code Maverick
  • 20,171
  • 12
  • 62
  • 114
0

Centering a div using CSS:

HTML:

   <div class="center">    
        .... more content ....
    </div>

CSS:

  .center {
       margin: 0 auto;
    }

OR

 .center {
       margin-left: auto;
       margin-right: auto;
    }

The margin: 0 auto; sets the left and right margin to whatever pixel left on the left and right of the page.

Try in jsfiddle

Ishan Jain
  • 8,063
  • 9
  • 48
  • 75