小さなラッパーの100％-screen-width divの中央のテキスト

Question

divを中心にして、100％の画面幅の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

コードが時間とreponsiveの99％を進めています。しかし、いくつかのコンピュータ/スクリーンでは50％オフです。ですから、私はあまりハッキーではない（変換なしなど）、より標準的で、その効果を得る堅牢な方法を望みます。

ラッパー900px> 100％ - 画面幅の色付きdiv>その色付きdivの中央のテキスト。

これを可能な限り最高に達成するにはどうすればよいですか？ ありがとう！

Answer 1

どのようにこのアプローチについて、絶対位置決めさ擬似要素を使用。 outer-space divをoverflow:hiddenとすると、水平スクロールバーが表示されなくなります。 を.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％の画面幅を100％の画面幅、使用ビューポート（100vwを）したい場合は

ビューポート

アット・ルール@viewportのCSSは、入れ子になった記述子のセットが含まれています中括弧で区切られたCSSブロック。これらの記述子は、主にモバイルデバイス上のビューポート設定を制御します。

1vw =ビューポートの幅の1％

1vh =ビューポートの高さの1％

1vmin = 1vw又は1vh、どちらが小さい

1vmax = 1vw又は1vhのいずれか大きい方

REF：@viewport

REF：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>