CSS“左”不工作(css “left” not working)

我有2个的div，父母和孩子，我想要那个孩子左侧（左边框）将在家长的中心。

为什么这个代码不工作？即left: 50%的孩子，没有工作。

<div id="outher">
    <div id="inner">

    </div>
</div>

CSS：

#outher {
   width: 1000px;
   height: 1000px;
   background-color: #ccc;
}

#inner {
   width: 400px;
   height: 300px;
   background-color: #090;
   left: 50%;
}

演示http://jsfiddle.net/vrse2/5/

Answer 1:

您需要设置position ，以absolute或relative ：

#inner {
   width: 400px;
   height: 300px;
   background-color: #090;
   position: absolute;
   left: 50%;
}

Answer 2:

CSS left仅定位的元素的作品。

从W3C引用

Values  <length> | <percentage> | auto | inherit
Initial value   auto
Applies to  positioned elements
Inherited   No

尝试

#inner {
   width: 400px;
   height: 300px;
   background-color: #090;
   position: absolute;
   left: 50%;
}

好读

MDN：CSS参考-左（最佳恕我直言）
W3C：CSS /属性/左

Answer 3:

您需要添加position: absolute; 你的CSS。 left用于绝对定位。

你的情况：

#inner {
   width: 400px;
   height: 300px;
   background-color: #090;
   position: absolute;
   left: 50%;
}

Answer 4:

使用：

margin-left: 50%;

要么：

position:relative;
left:50%;

Answer 5:

尝试以下操作：

HTML部分：

<div id="outher">
    <div id="inner">

    </div>
</div>

CSS部分：

#outher {
    width: 1000px;
    height: 1000px;
    background-color: #ccc;
}

#inner {
    width: 400px;
    height: 300px;
    background-color: #090;
    left: 50%;  
    margin:0 auto;
    position: absolute;
}

我认为这可以帮助你解决你的问题。