html - 居中固定宽度的元素比流体父更宽？

Question

所以，我今天才发现这个，但我在 Stackoverflow 上的任何地方都找不到这个解决方案，所以我想我应该分享它。让我知道它是否已发布到其他地方，我会将其标记为重复。

据我所知，使元素居中比父元素宽是一个相当普遍的问题，我遇到的唯一解决方案是使用 Javascript，结果是一段冗长、困惑的代码，难以维护许多元素使用此功能。

HTML 问题:

<div class="container-fluid" >
    <div class="center-me-fixed">
        <span> Center </span>
    </div>
</div>

CSS:

.container-fluid {
    max-width: 400px;
    width: 100%;
    height: 100%;
    display:block;
    margin:auto;   
}

.center-me-fixed {
    width: 500px;
    height:50px;
    text-align: center;
}

Answer 1

解决方法:

对需要居中的 child 使用绝对定位，混淆左/右值并将边距设置为自动，如下所示:

CSS:

.center-me-fixed {
    position:absolute;
    left: -1000%;
    right: -1000%;
    margin: auto;
    display: block;
    width: 500px;
    height: 50px;
}

确保父容器的位置是相对的:

.container-fluid {
    position: relative;
     width: 100%;
    height: 100%;
    display:block;
    margin:auto;   
}

就是这样!我不确定这是如何工作的，如果有人可以解释那会很酷。

jsFiddle