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..

    How to layer a
    element ontop of a other elements

    How to use toggle css classes on an element onclick?

    How to script CSS to achieve hide/appear effect based on hover

    How to specify multiple hover event targets in CSS?

    How to make my footer always stay at the bottom of the page, even when the page content is smaller than the screen?

    How to make text wrap nicely below start of first line

    How to use an existing source map to compile scss to css?

    CSS Styling - DIV - How to prevent the div element to skip to the next line?

    How to import Google Web Font in CSS file?

    How do I allow CSS files to be referenced from other domains?

    How can I use Perl to get a list of CSS elements with a color or background color attribute?

    Show bootstrap glyphicon in link when hovering

    How to decrease the width of this div so that another div can come next to it?

    Adding css resource to a QuickTip in ExtJS not showing

    How to set a td floating left in chrome?

    How to compile scss to css with node-sass

    How can I make these CSS absolute positions work in IE?

    How to limit width of

    -

    tag by length of content

    Mobile-Friendly CSS - How to hide a sidebar? [closed]

    How to make an inline-block box stick to the top? [duplicate]

    How to stretch a background-image with css

    How can I remove frame like background in twentysixteen theme

    How to prevent page from jumping on menu open?

    How to force text to wrap inside inline-block div?

    How to rotate and translate using CSS in IE8?

    how to put marquee div at the back of another none marquee div?

    How to control cursor/caret size with CSS

    How CSS property “opacity” renders in browsers (IE, Chrome, Firefox, Opera)?

    How do I disable the shadow only on one edge?

    How to make all my div's same height based on breathing content