ブロック要素を中央下揃えに配置したい

Question

現在ウェブ制作を行っています。

デザインとして以下のようなものをレスポンシブにコーディングしたいです。
（blue-backブロック要素の中で常に中央にありつつ、下部に位置するような）

<div class="blue-back">
    <div class="white-back">
        ...
    </div>
</div>
<div class="gray-back">
    ...
</div>
...

色々試行錯誤してみたのですが、なかなかうまく実現できません。
こういった場合は、どういった方法で実現するのでしょうか？

JavaScriptを用いて幅を取得しつつ、マージンを計算し適用する、といった操作が必要になってくるのでしょうか？

ご教示いただければ嬉しいです。よろしくお願いします。

追記

質問ご覧いただきありがとうございます。
あいまいな説明で申し訳ありません。
@sk_3122さんの情報の追記依頼に回答します。

■これは、灰色の部分は常に画面下部にある状態でしょうか？（ブラウザサイズを縮めても常に位置固定？メニューバー的な）また、灰色部分の高さは固定なのかとか、内容値によってサイズが変わる感じなのか等の情報も必要でしょうか。

灰色の部分はは特にフッター（常に画面下部にある）である、という意味ではありません。
blue-backの部分はページのトップに位置しヘッダーも含まれる部分ですので、ロゴやナビゲーションバーなどを配置する予定です。ヘッダーに関しては実装済みですので、特に問題ありません。

また、blue-backの高さは height: 100vhで高さを持たせることを検討しています。

■ブラウザサイズを縮めた場合はどうなるのでしょうか。

white-backの要素の上にちょっとした文字が載る補助的なデザインを想定しています（文字の可読性を上げるためのデザイン）。ですので、モバイル・タブレットなどの幅の狭い端末ではwhite-back要素は背景色を適用せず（ないものとして）、幅が広いPC端末のみ、このデザインを適用したいと考えています。

よろしくお願いします。

Comments

[sk_3122]

■これは、灰色の部分は常に画面下部にある状態でしょうか？（ブラウザサイズを縮めても常に位置固定？メニューバー的な）
■ブラウザサイズを縮めた場合はどうなるのでしょうか。白い部分だけでスクロールバーが出る状態ですか？それとも青い部分にスクロールバーが出て、青白ともに見切れる感じでしょうか。

[sk_3122]

■あと灰色部分の高さは固定なのかとか、内容値によってサイズが変わる感じなのか等の情報も必要でしょうか。

Answer 1

方法を2つ提示しますね！
まず基本となるcssがこれです

.blue-back {
    position:relative;
    background-color : blue;
    width:100%;
    height: 100vh
}
.white-back {
    background-color : white;
}

でwidthとheightが固定幅の場合

.white-back{
  position:absolute;
  width:600px;
  height:300px;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
}

でwidthとheightが可変幅の場合

.white-back{
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
}

でいかがでしょうか！

Comments

[peanuts]

ご回答ありがとうございます！イメージしていたデザイン通りのコーディングができました。
可変長、固定長の2通りのご教示、ありがとうございました！
今回は固定長で実装しましたが、とくに、固定長の場合「position: absolute」で、左右と下を0にして「margin: auto」とすることで、中央下揃えになる、という新たな知見が得られました。可変長に関しても今後のデザインの幅が広がりました！的確なご回答、ありがとうございました！

[MasakazuFukami]

そう言っていただけて光栄です！頑張ってください！

Answer 2

（ちょっとまだよくわかってないですが･･･）

■灰色はフッタではないのですか。灰色は何でしょうか。
青部分が height:100vh なんですよね？
灰色は青の子ではないのですよね。灰色あふれちゃいませんか？（いいの？）

■今回の質問のポイントは何でしょうか？
「白部分を青部分の下端につけたい」ということでしょうか。

単純にそれだけであれば、
青を position:relative; にして
その子である白は position:absolute; bottom:0; とかで
下端に付けちゃえば良いかなと思いますが･･･

.blue-back  { background:#2871a2; height:70vh; } /* 100vhだと灰色が溢れるのでとりあえず70 */
.white-back { background:#ffffff; padding:10px; }
.gray-back  { background:#d4d3d4; }

...

.blue-back  { position:relative; }
.white-back { position:absolute; left:5%; right:5%; bottom:0; }

みたいな･･･？
全然違ったらごめんなさい。

Comments

[peanuts]

追記依頼とご回答ありがとうございました！
イメージをうまく伝えられず、申し訳ありませんでした。
ご教示頂いた方法、たいへん参考になりました。

Answer 3

余白を%指定すれば行けると思います。

.blue-back {
	background-color : blue;
	width:100%;
}
.white-back {
	background-color : white;
	margin-left : 10%;
	margin-right : 10%;
}

Comments

[peanuts]

説明が拙く、イメージが伝えられずすみませんでした。
ご回答ありがとうございました！