How to center div within another div?


Tags: html,css

Problem :

I'm learning how to use the position relative/absolute.

However, I've come a little stuck.

I'm trying to horizontally center a div within a div but when I add margin: 0 auto; it does nothing.

I've made a Fiddle.

Or here's the code:

<!DOCTYPE HTML>
<html lang="en-UK">
    <head>
        <link href="DivTest.css" rel ="stylesheet" type="text/css">
        <title></title>
    </head>
    <body>
    <div id="header"></div>
    <div id="outer">
        <div id="inner"></div>
    </div>
    </body>
</html>

CSS:

body, html {
     margin: 0;
     width: 100%;
}

#header{
     position: relative;
     width: 100%;
     height: 200px;
     background-color: lightgreen;
     margin: 0 0 20px 0;
}

#outer{
     position: relative;
     width: 800px;
     height: 500px;
     background-color: red;
     margin: 0 auto;

}

#inner{
     position: absolute;
     width: 200px;
     height: 250px;
     background-color: lightblue;
     margin: 0 auto;
}

Any help would be appreciated.



Solution :

Just remove the position:absolute; property for #inner

Fiddle: http://jsfiddle.net/Q8NVH/7/


    CSS Howto..

    Some doubts about how exactly grid BootStrap component work? [closed]

    How do I center a button in html5?

    How to make half-square background in css

    My CSS looks perfect on desktop, but leaves a 2-5 pixel line to the right on mobile, how do I find the issue?

    li:before{ content: “■”; } How to Encode this Special Character as a Bullit in an Email Stationery?

    How to adjust button css styles

    How do I place the text on the image in the header?

    How to vertically align in the middle a clickable image (between ) inside a div in a responsive manner?

    Use like this <div class="accounts"> <a href="LinkA" target="_blank"><img src="Vendors/Images/GithubLogo.png" alt="Github"></a> </div> <div class="accounts"> <a href="LinkB" target="_blank"><img src="Vendors/Images/SOLogo.png" alt="Stack Overflow"></a> </div> ...
    Read more

    How do I get a CSS class to work in my Javascript file?

    CSS HTML - How to add more outer colour on the drop down menus and more than one word per drop down

    How do I make current menu item active in asp.net webforms

    How to add CSS stylesheet to aspx.vb table

    How to make stylish pageviews counter using html and css? [closed]

    How can I create a good-looking responsive image gallery WITHOUT perfectly sized images?

    How to keep CSS class on menu item with dropdown

    How to create a form that flys out onto the screen using javascript/css

    How to align form at the center of the page in html/css

    css hover image and show icon not show

    How to use absolute positioning without overlap effect

    How can I delete unused css lines?

    How can I center Twitter-Bootstrap 3 navbar buttons?

    How to change the content of a span using css hover?

    How to auto position sidenav in twitter bootstrap while sliding

    how to achieve this effect with css html?

    How to create fixed to screen layout

    tooltip box not showing using css

    how to clean the css style of jquery-ui be added automatically when someone use “.draggable()”

    How to style a dynamic html created by PHP

    How can I use the HTML data attribute in CSS as a property? [duplicate]

    How can I center an iframe but also have it display inline?