divの下の中央にコンポーネントを配置する方法

Question

divに適用され、残りのスペースのサイズを知らずにコンポーネント（ボタン）を中央に配置するスタイルです。このスタイルは一般的なので、divとボタンのサイズを取る。

私はこのスタイルを使用しますが、それは私のために動作しませんでした：

<div location="buttonLayout" style="display:flex; justify-content:center; align-items:flex-end ;"></div> 

ボタンが中央になく、親のdivのremainigの空間の底部に配置されていません。

Answer 1

あなたは下の真ん中のボタンを取得するには、絶対位置を使用することができます。また、持っている必要が親コンテナを動作するように

.parent { 
 
    background: gold; 
 
    position: relative; 
 
    width: 300px; 
 
    height: 400px; 
 
    box-sizing: border-box; 
 
    padding-bottom: 48px; // Padding + button height 
 
} 
 

 
.parent button { 
 
    background: grey; 
 
    border: none; 
 
    height: 32px; 
 
    color: #fff; 
 
    
 
    position: absolute; 
 
    bottom: 8px; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
}

<div class="parent"> 
 
    <button>Button any size</button> 
 
</div>

Answer 2

はこのために、この

.mybutton { 
    position: absolute; 
    bottom: 0px; 
    margin-left: auto; 
    margin-right: auto; 
} 

を試してみてくださいデフォルト（静的）以外の位置設定。たとえば、position: relative;

Answer 3

ボタンにbottom: 0;を追加するだけです。

次のHTMLがある場合：

html, body{ 
    height: 100%; 
    width: 100%; 
} 

body{ 
    margin: 0; 
} 

#flexItem{ 
    height: 100%; 
    width: 100%; 

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

#bottomButton{ 
    bottom: 0; 
} 

JSFiddle：

<div id="flexItem" location="buttonLayout"> 
    <button id="bottomButton" type="button">Click Me!</button> 
</div> 

をあなたはこのCSSを使用することができます。

インラインCSSを使用しないでください。