Как горизонтально центрировать внутренний div внутри внешнего div?

Question

мне нужно отцентрировать DIV по горизонтали внутри другой DIV

Вот мой HTML код:

<div id="outer" class="outerDiv"> 
    <div id="inner" class="innerDiv"> 
    </div> 
</div> 

Вот CSS:

.outerDiv { 
    width:100px; 
    height:100px; 
    background:red; 
} 

.innerDiv { 
    width:50px; 
    height:50px; 
    background:blue; 
    // what to add here ? 
} 

Вы можете попробовать: http://jsfiddle.net/nggSG/

Как я могу горизонтально центрировать синий div внутри красного div?

Answer 1

.innerDiv { 
    margin: auto; 
    width:50px; 
    height:50px; 
    background:blue; 
} 

центры Div по горизонтали

Answer 2

так:

.innerDiv { 
    width:50px; 
    height:50px; 
    background:blue; 
    margin : 0 auto; 
    } 

Answer 3

Вот что вам нужно сделать:

.outerDiv { 
    width: 100px; height: 100px; 

    background-color: red; 
    position: relative; 
} 

.innerDiv { 
    width: 50px; height: 50px; 
    top: 25px; left: 25px; 

    background: blue; 
    position: absolute; 
} 

Если вычесть ширину и высоту внешнего DIV из внутреннего div и разделите на 2, вы знаете, сколько вам нужно переместиться через внутренний div. Кроме того, внешний div должен быть position: relative, а внутренний div должен быть position: absolute.

Если вам нужно более динамическое центрирующее решение, я использовал Midway.js от Shipp Co (http://shipp.co/midway). Надеюсь, это помогло!

EDIT: jsFiddle - http://jsfiddle.net/5A9sq

Answer 4

Вот мой HTML

<div id="outer" class="outerDiv"> 
    <div id="inner" class="innerDiv"> 
     Inner div (centered) 
    </div> 
</div> 

простой CSS

.outerDiv{ 
     width:100%; 
     margin:0 auto; 
     text-align: center; 
     background-color: red; 
    } 

    .innerDiv{ 
     width:50%; 
     display: inline-block; 
     background-color: yellow; 
     color: black; 
    }