divの中でDIVをセンターにする方法

私は、私が1回以上これをうなっていないウェブ開発で働いている一人の魂に会ったと思いません.あなたが新しいしているし、その最初のプロジェクトを終了しようとしているかどうか、または私と同じようにすぐにプロジェクトを起動したときに学んだことをすべて忘れて、これはちょうど1つの概念には、しばらくの時間がかかります.どちらの方法でも、私は判断しません、また、私はあなたの時間を浪費します.この仕事を成し遂げる方法が1トンあります.私はそれをシンプルにして、あなたに私の試みを示します.

ハローフレックス👋

大部分のウェブページのゴールが彼らを敏感にするために、メディア質問に取り組むとき、Flexboxが仕事の多くを減らすのを用いて.

必要条件

本体とHTMLの両方の高さCSSプロパティが100 %

に設定されていることを確認します

あなたの親コンテナのディスプレイCSSプロパティがflex

に設定されていることを確認します
CSSとHTMLを次のように適用できます.
HTML

<div id="flex-container">
    <div>
        I am centered
    </div>
</div>

CSS

html, body {
    height: 100%:
    margin:0;
}

#flex-container {
display: flex;
height: 100vh;
background-color: #31493C;
justify-content: center;
align-items: center;
}

#flex-item {
background-color: #FCA311;
}

結果:

ウィンドウをリサイズするとき:

シンプル.今あなたが初心者なら私は何かについて考えてほしい.「フレックスコンテナ」が最も外側のコンテナでないならば、あなたに問題を与えることができたこのコードの線が、あります.あなたが完全に理解しないコードをコピーしてはいけないので、私はこれをしました.どのラインが下記のコメントで潜在的な問題であるかについて、私に話してください.両方とも受け入れる.