Question

有没有办法让子div在具有隐藏溢出的父div中居中并忽略隐藏的溢出？

示例：

.outer {
  width: 100%;
  margin-left: 40px; /*will cause overflow*/
  overflow-x: hidden;
}
.inner {
  width: 80px;
  height: auto;
  margin: 0 auto;
  position: relative;
}

<div class="outer">
  <div class="inner">
  Hello World
  </div>
</div>

预期产出：

----------------------------------////
| outer                          |   / <- Hidden overflow
|                                |   /
|            --------            |   /
|            |inner |            |  <- Centered
|            --------            |   /
|                                |   /
----------------------------------////

实际输出：

----------------------------------////
| outer                          |   / <- Hidden overflow
|                                |   /
|                --------        |   /
|                |inner |        | <- not centered
|                --------        |   /
|                                |   /
----------------------------------////

如果outer div没有溢出，inner div应该水平居中，但是因为溢出。 inner div稍微偏离中心位置。无论如何都要让inner div不在outer div的可见部分中居中？

编辑：

这个问题不重复。建议的副本是如何将div放在另一个div中，假设没有隐藏的溢出。我的问题是特定于将div放在父div中，其宽度溢出并隐藏。在这种情况下，与提议的副本相关联并不能提供令人满意的解决方案。

Answer 1

我想我明白你想做什么。

您可以使用fixed位置来实现这一目标，如果您希望将其置于所有元素之上，则可以使用z-index

实施例

.outer-container {
  display: table;
  width: 120%;
  height: 120px;
  background: #ccc;
  overflow: hidden;
}

.inner-container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.centered-content {
    display: inline-block;
    background: #fff;
    padding: 20px;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    z-index: 100;
    position: fixed;
    border: 1px solid;
}

<div class="outer-container">
  <div class="inner-container">
    <div class="centered-content">
      overflow: hidden
    </div>
  </div>
</div>

如何将一个div集中在一个隐藏溢出的div中？

1 个答案: