视

Question

我想将div和它的文本居中，放在一个100％的屏幕宽度的div中，它是一个较小的包装器。

<button class="close-button" aria-label="Close menu" type="button" data-close>
  <span aria-hidden="true">&times;</span>
</button>

.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应该向右移动一点，也就是这样这样做并不是我认为最好的。

我想要一个更强大，更灵敏的解决方案。更清楚的是，它是底部的粉红色部分本网站：http://ndvibes.com

代码在99％的时间里都在工作并且具有代表性。但在某些电脑/屏幕上它可以享受50％的折扣。所以我想要一个不那么hacky（没有变换等）和更标准，更健壮的方式来获得这种效果。

包装900px＆gt; 100％ - 屏幕宽度的彩色div＆gt;以彩色div为中心的文本。

我怎样才能尽可能做到最好？谢谢！

Answer 1

这种方法如何使用绝对定位的伪元素。带有outer-space的{{1}} div是为了防止出现水平滚动条。我已将overflow:hidden添加到padding-top，以便您可以看到以全屏模式运行的代码段。

＆＃13;

.wrapper

＆＃13;

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;
}

＆＃13;

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>

在小包装中以100％-screen-width div为中心文本

2 个答案:

视