CSS中的中心和位置元素答案

【问题标题】：center and position elements in CSSCSS中的中心和位置元素
【发布时间】：2013-11-14 16:11:20
【问题描述】：

我的 HTML/CSS 代码卡住了，我需要在一个绝对定位的 div (C) 中水平居中两个带有背景图像的 div (A, B)。

请记住：

较大 div (A) 的底部边缘需要位于 (C) 的底部。
(A) 的顶部边缘需要位于 (B) 的顶部边缘。
(B) 需要在 (A) 之后 - 我认为它需要相同的 position 属性。
向 (C) div 添加的内部 div 元素的数量不受限制

这是我的小提琴，我设法将 (A) div 定位在 (C) http://jsfiddle.net/meridius/DGexR/ 内，但无论我做什么，我都无法完成其余的工作。

编辑：
这是它的样子

代码预览：
有关工作示例（带有背景图片），请参阅上述小提琴。

HTML

<div class="desk">
    <div class="figure">        
        <div class="type sprites-sachy sprite-WKing"></div>
        <div class="special sprites-sachy sprite-halo"></div>
    </div>
</div>

CSS

.desk { /* this class must not be touched */
    position: absolute; 
    top: 129px; 
    left: 202px;    
    border: 1px solid #FF0000; 
    width: 65px;    
    height: 65px;
    padding: 0;
    float: left;
}
.figure {
    bottom: 0;
    left: 50%;
    position: absolute;
}
.type {
    margin-left:-50%;
    z-index:2;
}
.special {
    border: 1px solid #008000;
    z-index:1;
  /*   display:none; uncomment this to see .figurka centered how it is supposed to */
}

注意：
我想避免这个问题过于本地化，所以让我先声明一下，我相信我' m 不是唯一一个在 CSS 中定位（和居中）元素有问题的人。

【问题讨论】：

请在您的问题中包含您的代码。
“我相信我不是唯一一个在 CSS 中定位（和居中）元素时遇到问题的人”——好吧，你不是第一个问这个问题的人任何一个。网络上有很多关于使用 CSS 使元素居中的各种技术的讨论。
有没有机会在 Paint 中创建并链接图像？无法想象您想要的外观是什么。
你能发布一张预期结果应该是什么样子的图片吗？

标签： css html background-image css-position

【解决方案1】：

当您使用display: none 或position: absolute 时，.special 会从流中取出，.type 会正确居中。

要将.special 水平居中，您可以使用CSS-TRICKS: Centering Percentage Width/Height Elements 中的技术：将其移到顶部并向左移动一半宽度

.special {
    position: absolute;
    top: 0;
    transform: translate(-50%, 0);
}

剩下的唯一项目是将.special 移动到.type 后面和z-index: -1。

查看全文JSFiddle

既然你知道.sprite-halo的宽度是78px，你当然可以一直使用像素值

.special {
    position: absolute;
    top: 0;
    left: -39px;
}

另见@Bipin Kumar Pal 的回答。

JSFiddle

【讨论】：

这太棒了，这正是我想要实现的！我有点害怕transform 属性，它是实验性的，IE 仅支持 v9 及更高版本。我希望我能说服一些人，我知道在 WinXP 上使用 v8，切换到一些更成熟的浏览器。如果您碰巧知道如何在没有transform 的情况下获得相同的结果，我将不胜感激。如果你不这样做，还是谢谢你。
我不喜欢@Bipin Kumar Pal 的回答，因为他将 .special{left} 设置为 px。我更愿意以百分比的形式查看它，因为应用程序使用不同的 .special 图像，我不想为每个图像都设置一半的宽度。

【解决方案2】：

所以你得到了这个结构：

<div class="desk">
    <div class="figure">
        <div class="type"></div>
        <div class="special"></div>
    </div>
</div>

确保 .desk 是绝对定位或相对定位（您已经这样做了）。请注意，浮动不会做任何事情。现在我想 .type 是 200px h/200px w 而 .special 是 150px h/150px w。

.desk { position: absolute; .. }
.desk .figure { position: absolute; width: 200px; height: 200px; bottom: 0; left: 50%; margin-left: -100px; }
.desk .type { position: absolute; z-index: 2; margin-left: -100px; left: 50%; top: 0; }
.desk .special { position: absolute; z-index: 1; margin-left: -75px; left: 50%; top: 0; }

就是这样。

【讨论】：

感谢您的回答，但我“摆弄”了您的解决方案jsfiddle.net/meridius/Ndhr8，您可以看到它只是一团糟。另外我想避免在 px 中使用尺寸，而是使用百分比。
我对小提琴进行了一些更新，它就像一个魅力。请记住，绝对定位的元素应该有维度。我介绍了 .type 和 .special 作为新的包装器，其中包含您使用的精灵。现在您可以使用 margin: auto 来居中这些项目。不过，您仍然需要一些固定尺寸。
我刚看到小提琴没有更新；再次进行更改并更新它。这对你有用吗？
很抱歉，您的结果与图片不太一样（请参阅更新后的问题）。在我原来的小提琴中，我写道不能碰.desk 类，那是因为我像jQueryUI Draggable 一样使用它，需要tolerance:"fit" 到jQueryUI Droppable。然而，您的解决方案依赖于其改变的维度。所以我不能接受你的回答。

【解决方案3】：

.sprite-halo{ background-position: 0 -1700px; width: 78px; height: 12px; background-color:darkgreen; position:absolute; top:0; left:-40px; z-index:-5;}

请使用此代码。我这边工作。

【讨论】：