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

解决方案：

对需要居中的孩子使用绝对定位，弄乱左/右值并将边距设置为自动，如下所示：

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

Answer 2

我在网上搜索过，我发现的最佳解决方案就是这个 Fiddle
的CSS：

html, body {
    height: 100%;
}

div.container-fluid {
  border:1px solid blue;
  max-width:400px;
  margin:0px auto;
  min-height: 100%;
}
div.container-fluid .center-me-fixed {
  position:relative;
  right:50%;
  text-align:center;
}
div.container-fluid .center-me-fixed span  {
  border:1px solid green;
  width: 500px;
  height:50px;
  display:inline-block;
  margin-right:-100%;
}

HTML：

<div class="container-fluid">
  <div class="center-me-fixed">
    <span>
      this should be centered
    </span>
  </div>
</div>

如果此解决方案不符合您的需求，我会为您浪费时间而道歉。

将固定宽度的元素居中，比流体母体宽？

2 个答案: