css - コンテンツをヘッダーとフッターの間で垂直方向に中央揃えにする

Question

誰かが私を助けることができるのだろうか。ヘッダー、フッター、およびコンテンツ コンテナーを備えた Web サイトがあります。ここで、ページではなく、ヘッダーとフッターのコンテナーの間でコンテンツを垂直方向に中央揃えにしたいと考えています。これを達成する方法はありますか？

Answer 1

以下のcssを試してください

        <div >header</div>
        <div class="container">
               <p>This small paragraph...</p>
        </div>
        <div >footer</div>

CSS:

           div.container {
                min-height: 10em;
                display: table-cell;
                vertical-align: middle ;}

Answer 2

以下のcssを試してください

        <div class="wrapper">
           <div >header</div>
           <div class="container">
               <p>This small paragraph...</p>
           </div>
           <div >footer</div>
       </div>

CSS:

        .wrapper{ display: table; }

        div.container {
            min-height: 10em;
            display: table-cell;
            vertical-align: middle ;
        }

これを試して、display:table スタイルのラッパーを追加しました。

table-cell プロパティは、display:table プロパティを持つラッパーでのみ機能します