CSS：不能以div为中心

Question

我的标记页面包含以下两个元素：

html {
    width: 100%;
    height: 100%;
}
Body {
    height: 100%;
    width: 100%;
}
div#bg {
    height:320px;
    width:850px;
    margin: auto;
    background-color: blue;
}
#black {
    position: absolute;
    background-color: black;
    width:33%;
    height:13%;
    margin:90px auto 0;
}

...

<ul id="black"></ul>
<div id="bg"></div>

JSFiddle

我想将black置于bg内，集中在其上边距下方13％。不幸的是我无法让black居中！我得到的是：

有人可以告诉我如何将black放在bg的中心位置吗？ 感谢

Answer 1

当你试图使绝对定位元素居中时，这个技巧就可以了。

left: 50%;
top: 50%
margin-top:-(half of the height);
margin-left: -(half of the width);

CSS

#black 
{
 position: absolute;
 background-color: black;
 width:33%;
 height:13%;
 margin-top:-7%;
 margin-left:-17%;
 left:50%;
 top:50%;
}

<强> Js Fiddle Demo

Answer 2

将margin:90px auto 0;更改为margin:90px 33.5% 0;

当您使用position:absolute时，margin:auto无法完成您想要达到的目标。我将容器的宽度除以2（33％/ 2）并从现在的相对左位置（50％）减去它，即50％ - 16.5％= 33.5％。

Answer 3

我会将UL放在DIV中，然后按照以下方式进行处理：

http://codepen.io/anon/pen/nDpAf

在UL上将左右值设置为％，而不是设置宽度。