How do I center a dynamic div?

Tags: html,css

Problem :

I'm not sure if this question has been answered (I think it probably has), but how do you center this dynamic div?

(I want #two to align itself to the middle position of #one.)

Right now my jsFiddle does this:


<div id="one">
<div id="two">
        <a class="stuff">a</a>
        <a class="stuff">b</a>
        <a class="stuff">c</a>


#one { width:100%; height:200px; background-color:#222; float:left; }
#two { text-align:center; float:left; }
.stuff { width:20px; height:20px; background-color:#444; margin:0 5px; float:left; }

I've tried margin:0 auto;, text-align:center; but still no dice. I'm not looking at declaring a defined margin like margin:0 41%; because if I wanted to add another <a class="stuff"> to the list it would get out of position...

Anyone? This is probably some simple positioning error that I can't figure out.

EDIT : I was looking around, and I saw this demo by Nivo Slider -- -- how is it defining itself with a 960px width?

centered div

Solution :

You'll need to wrap both #one and #two in a containing element. That should set the width. Then all you need to do is remove all the floats (on #one, #two and #two's children). JSFiddle

#wrapper { width:500px; }
#two { text-align:center;}
.stuff { width:20px; height:20px; background-color:#444; margin:0 5px; }

New markup.

<div id="wrapper">
    <div id="one"></div>
    <div id="two">
            <a class="stuff">a</a>
            <a class="stuff">b</a>
            <a class="stuff">c</a>

Without the wrapper two would just be aligned to the center of your window (or a parent with a width).

    CSS Howto..

    How to style webpage with percentages

    How to set style if the content is X [duplicate]

    how to count how many elements have a certain class

    How to alternate background colour on DIV rows? (Jquery and/or CSS)

    Non-responsive website - Viewport issue - Page showing zoomed in on mobile

    How to Change CSS Styling on a Checkbox on Hover with JQuery

    How to get body content to center on page using CSS

    How to change elements display order in CSS?

    navbar is split into multiple div classes - how to stick them all to the top on scroll? (javescript)

    how to use css to display multiple posts in inline-block like google+

    How to centre a
    within several other
    s (using a mixture of w3.css and css)

    How to set max-width for DIV contents but not the DIV itself?

    How can I use CSS to create a middle column that fills the height of the page?

    Why are THs bolder than TDs and how to avoid it?

    How to have a video take up the viewport height and width?

    CSS: how to move element from one column to another one without changing the html?

    How to add an attribute other than style attributes to css?

    How do I target a div without a class or id but with all these specific style-attributes

    How to reference CSS from libraries installed via npm?

    How is Bootstrap's `nav` class making anchors move to their own line

    How to adjust navbar to a fixed width in Twitter Bootstrap?

    Load More / Show Less issues using jquery

    How can I use a different CSS using jQuery?

    How to make css jQuery thumbnail slides loop

    How to create a progress bar animation

    CSS: how to make the font icon and text under it closer?

    How to take a div that is off screen and translate it to the middle of the screen using translateX()

    Drupal 7.x: how to apply styles to RSS feed in node?

    How to property adjust table?

    How can I add CSS to grandchild pages in an unordered list on Wordpress?