在小包装器中将文本居中为 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%的折扣。所以我想要一种不那么笨拙(没有转换等(和更标准、更强大的方法来获得这种效果。

包装器 900px> 100% 屏幕宽度的彩色div>该彩色div 中的居中文本。

我怎样才能尽可能最好地实现这一目标？谢谢！

Answer 1

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

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 规则在由大括号分隔的 CSS 块中包含一组嵌套描述符。这些描述符控制视口设置，主要在移动设备上。

1vw = 视口宽度的 1%

1vh = 视口高度的 1%

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

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

参考： @viewport

参考：视口大小的排版

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>