CSS - 要素を独自の幅からパーセントで配置する

Question

要素の中心（高さに関係なく）を親の下に配置したいとします。私は絶対に行くだろうと思ったが、本当に意味をなさないものはない。私はこの結果を持つことができますどのように

<div id="red"> 
    <div id="blue"></div> 
</div> 

：以下の画像を参照してください？

EDIT：別名G. Petrioliを@Gabyのおかげで、私は私の解決策を見つけた：

#red{ 
 
    width: 300px; 
 
    height: 200px; 
 
    background: red; 
 
    position:relative; 
 
} 
 
#blue{ 
 
    width: 100px; 
 
    height: 50px; 
 
    background: blue; 
 
    right:3%; 
 
    
 
    /* here is the magic solution*/ 
 
    position:absolute; 
 
    bottom: 0; 
 
    transform: translateY(50%); 
 
}

<div id="red"> 
 
     <div id="blue"></div> 
 
    </div>

Answer 1

あなたは一番下にそれを置くために絶対位置を使用し、その後に変換変換を用いる必要がありますその作業から50％上に移動します。だから、

.red{position:relative} 
.blue{ 
    position:absolute; 
    top:100%; 
    right:50px; 
    transform:translateY(-50%); 
} 

Answer 2

#red{ 
 
    position: relative; 
 
    width: 200px; 
 
    height: 300px; 
 
    background: red; 
 
    
 
} 
 

 
#blue{ 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 120px; 
 
    background: blue; 
 
    top: calc(100% - 50px); 
 
    /* 100% - it's width/2 */ 
 
}

<div id="red"> 
 
    <div id="blue"></div> 
 
</div>

#blueのwidthが200pxある場合

、top: calc(100% - 100px)。

#blueの場合は、が500pxの場合、top: calc(100% - 250px)です。

Answer 3

あなたのような、CSSのポジショニングを使用することができます。

.red { 
    position: relative; 
} 

.blue { 
    position: absolute; 
    top: 100%; // Will be at exact bottom 
    left: 50%; 
    transform: translate(-50%, -50%); // Will pull 50% (of blue) upwards & 50% from the right as well 
} 

.red { 
 
    background: red; 
 
    width: 200px; 
 
    height: 300px; 
 
    position: relative; 
 
} 
 

 
.blue { 
 
    background: blue; 
 
    width: 100px; 
 
    height: 200px; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<div class="red"> 
 
    <div class="blue"></div> 
 
</div>

・ホープ、このことができます！

Answer 4

transformtranslate()は、容器自体のサイズから％を計算します。

初期値なし

は変形要素

継承ない

パーセンテージrefer to the size of bounding box

に適用します

メディア視覚

計算値指定が、絶対長さに

アニメーション種別変換

標準的な順序一意非曖昧順序を変換相対的な長さを持つよう形式的文法によって定義される。

は箱が下に整列して中央に配置された後のアクションでそれを示すデモを下回る状況にはい

を積み重ねる作成します。

.red { 
 
    display: table-cell; 
 
    vertical-align: bottom; 
 
    width: 150px; 
 
    height: 150px; 
 
    background:/* see center*/ 
 
    linear-gradient(to left,transparent 50%, rgba(0,0,0,0.2) 50%), 
 
    linear-gradient(to top,transparent 50%, rgba(0,0,0,0.2) 50%) 
 
    crimson; 
 
    } 
 

 
.blue { 
 
    width: 40%; 
 
    min-height:3em; 
 
    margin: auto; 
 
    background: rgb(0, 119, 204); 
 
       transform: translate(50%, 50%); /* what you look for */ 
 
} 
 
body { 
 
display:table; 
 
border-spacing:1em;

<div class="red"> 
 
    <div class="blue">.<br/>.<br/>.<br/> 
 
    </div> 
 
</div> 
 

 
<div class="red"> 
 
    <div class="blue"> 
 
    </div> 
 
</div> 
 

 
<div class="red"> 
 
    <div class="blue"><br/><br/><br/><br/><br/><br/><br/><br/> 
 
    </div> 
 
</div>

officialとto learn further