在小包装器中以 100% 屏幕宽度 div 居中文本

Question

我想将一个 div 和它的文本放在一个 100% 屏幕宽度的 div 中，该 div 位于一个较小的包装器中。

.wrapper {
  height: 800px;
  width: 900px;
  margin: auto;
  background-color: #000000;
}

.box-wrapper {
  width: 1000%;
  position: relative;
  left: -500%;
  background-color: #FF6600;
}

.box {
  background-color: #FF0000;
  width: 600px;
  position: relative;
  left: 50%;
  color: #00FF00;
}

span {
  text-align: center;
  display: block;
}

<div class="wrapper">
  Random text for wrapper-div

  <div class="box-wrapper">
    <div class="box">
      <span>ABC</span>
      <span>DEF</span>
      <span>GHI</span>
    </div>
  </div>
</div>

这段代码有点工作，但并不完美。 红色的 div 应该向右移动一点，也是这样 在我看来，这样做并不是最好的。

我想要一个更强大且响应速度更快的解决方案。 更清楚地说，是底部的粉红色分区 本站：http://ndvibes.com

那里的代码 99% 的时间都在工作并且响应迅速。但在某些计算机/屏幕上，它是 50% 的折扣。所以我想要一种更简单（没有变换等）和更标准、更强大的方式来获得这种效果。

Wrapper 900px > 100%-screen-width coloured div > 在该彩色 div 中居中文本。

我怎样才能尽可能地做到这一点？ 谢谢！

Answer 1

这种方法怎么样，使用绝对定位的伪元素。 outer-space div 和overflow:hidden 是为了防止出现水平滚动条。我已将padding-top 添加到.wrapper，以便您可以看到sn-p 在全屏模式下运行。

body {
  margin:0;
}
.outer-space {
  overflow: hidden;
  padding-top:80px;
}
.wrapper {
  height: 800px;
  width: 100%;
  max-width: 900px;
  margin: auto;
  background-color: #000000;
}

.box {
  background-color: #8904B1;
  margin:0 auto;
  color: #ffffff;
  position: relative;
  z-index: 2;
  padding:10px 0;
}
.box-wrapper {
  position: relative;
  width:100%;
  max-width: 600px;
  margin:0 auto;
}
.box-wrapper:before, .box-wrapper:after {
  content:"";
  position: absolute;
  height:100%;
  width:100vw;
  background-color: #8904B1;
  top: 0;
  z-index: 1;
}
.box-wrapper:before {
  left:-100%;
}
.box-wrapper:after {
  right:-100%;
}

span {
  text-align: center;
  display: block;
}

<div class="outer-space">
  <div class="wrapper">
    Random text for wrapper-div
    <div class="box-wrapper">
      <div class="box">
        <span>Crazy full width window</span>
        <span>absolute positioned pseudo elements</span>
        <span>with centered content div and centered text thingy</span>
        <span>all inside of a fixed width page wrapper!</span>
        <br><span>““”̿ ̿ ̿ ̿ ̿’̿’̵͇̿̿з=(•̪●)=ε/̵͇̿̿/̿ ̿ ̿ ̿ ̿’““</span>
      </div>
    </div>
  </div>
</div>

Answer 2

要使子元素居中，将以下内容添加到父包装将使所有子元素居中。

  display: flex;
  align-items: center;
  justify-content: center;

如果您想要 100% 的屏幕宽度，请使用视口 (100vw) 以获得 100% 的屏幕宽度

视口

@viewport CSS at-rule 在 CSS 块中包含一组嵌套描述符，由花括号分隔。这些描述符控制视口设置，主要在移动设备上。

1vw = 视口宽度的 1%

1vh = 视口高度的 1%

1vmin = 1vw 或 1vh，以较小者为准

1vmax = 1vw 或 1vh，以较大者为准

参考号：@viewport

参考号：Viewport Sized Typography

body {
  margin: 0;
}

.wrapper {
  height: 800px;
  width: 900px;
  margin: auto;
  background-color: #000000;
}

.box-wrapper {
  width: 900px;
  max-width: 900px;
  position: relative;
  background-color: #FF6600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.outer-wrapper {
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box {
  width: 80%;
  background-color: #FF0000;
  position: relative;
  color: #00FF00;
}

span {
  text-align: center;
  display: block;
}

<div class="outer-wrapper">
  <div class="wrapper">
    <p>Random text for wrapper-div</p>
    <div class="box-wrapper">
      <div class="box">
        <span>ABC</span>
        <span>DEF</span>
        <span>GHI</span>
      </div>
    </div>
  </div>
</div>