CSS:不能居中一个div

Question

我的标记页面包含如下 2 个元素:

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