html - 将 div 居中到屏幕

Question

我似乎无法将黑框置于屏幕中央，而不是位于其内部的 div 中心。

编辑:为澄清起见，我只想要结果面板中央的黑框，而不是带有它的粉红色框。此外，我还想保持我的 javascript 完好无损。

编辑 2:我正在尝试在用户单击图像时在屏幕中间弹出类似叠加层的内容。不确定这是否是实现该目标的最佳方法或最佳代码!

如果有人能提供帮助，我们将不胜感激。这是我的尝试:http://jsfiddle.net/BPLcv/1/

HTML

<div class="tooltip">
     <div class="description">Here is the big fat description box</div>
</div>
<div class="tooltip">
     <div class="description">Poop</div>
</div>

CSS

.tooltip {
    position: relative;
    border: 1px #333 solid;
    width: 200px;
    height: 200px;
    background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSkI2PXYOOOHltHwgIz6xwfuN079IAJDLsmOV68rQNNLCE-GFZ1_aQN89U');
}

.overlay {
    position: absolute;
    display: none;
    background-color: rgba(0, 0, 0, 0.7);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.description {
    position: absolute;
    width: 300px;
    height: 300px;
    display: none;
    background-color: black;
    text-align: center;
    z-index: 1;
    /* centering???? */
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -75px;
}

谢谢!

Answer 1

如果您想要屏幕中间的描述/叠加层，最好的办法是使用工具提示元素之外的元素，因为这些元素的宽度是固定的。

如果你有一个 width: 100% 的顶层元素，你的居中 css 将适用于任何直接的 child 。

工作 fiddle :http://jsfiddle.net/BPLcv/4/

这里的叠加层填充了您悬停的工具提示的描述元素中的任何内容:

overlay.html($(this).find(".description").html());

描述类总是隐藏的。