妄:生意気;
できないものはただ生意気な心を抱いて、それを見抜くふりをするしかないだろう.

CSSセンター問題

1 text-align：center

テキスト中心の問題(画像)

2 align-content

このアトリビュートは、複数行のflexコンテナにのみ適用され、サイド軸に余分なスペースがある場合はflex線を整列させます.
使用前提:flexレイアウト;
(「妄」の目を見て-CSSのflexレイアウトと枠線の影を着たい)
任意のレイアウト:display:flex;
行内要素:display:inline-flex;

3中まとめ

3.1水平中央

3.1.1行内の要素が中央にある（テキスト（text）、ピクチャ（img）、ボタンなど）

text-align:center;

3.1.2ブロック要素が中央にある

定幅ブロック要素中央

幅(ブロック要素の幅widthが固定値)とブロックの2つの条件を満たす要素は、左右のmargin値がautoであることによって中央に位置することができる.注意:この場合、保証が必要です:position:relative;

.div1{
　　　　 width:200px;
　　　　 border:1px solid red;
        margin:0 auto;
     }
<div class="div1">Hello worlddiv>

不定幅ブロック要素中央

実際の作業では、ページの数が不確定なため、幅を設定することで弾力性を制限することはできません.(不定幅ブロック要素:ブロック要素の幅widthは固定されません.)
i.ブロックレベル要素のdisplayをinlineタイプ(行内要素表示に設定)に変更し、text-alignを使用して中央効果を実現します.
​ ii. 親要素にfloatを設定し、親要素にposition:relativeとleft:50%を設定し、子要素にposition:relativeとleft:-50%を設定することで水平中央を実現します.

3.2垂直方向中央

親要素の高さ決定された単行テキストは、親要素のheightとline-heightの高さを一致させることによって実現される(heightは要素の高さ、line-heightは行の高さ、テキスト内の行と行の間のベースライン間の距離を指す).

親要素の高さが決定された複数行のテキストは、body、tr、tdを含む挿入tableラベルを使用してvertical-align:middleを設定します.

3.3水平垂直中央

#login_box {
      width: 300px;
      height: 150px;
      border: 1px solid #ccc;
      position: absolute;
      left: 50%;top: 50%;
      margin-left: -150px;
      margin-top: -75px;
    }

この数行は#login_boxの目的は、ブラウザで水平に中央に表示させることです.(このlogin_boxは、ブラウザがどのように引き伸ばされても常に中央に保たれます)
原理(ブラウザの中心点と#login_boxの中心点を揃え、.footをブラウザの中で水平に中央に位置させる):
left:50%; #login_をboxの左枠はブラウザの左から50%離れているのでlogin_box全体はブラウザの真ん中ではなく、
margin-left:-150 pxを使用する必要があります.#login_をboxは、150ピクセル(すなわち、login_box自体の幅の半分)を左に移動します.これでbox全体がブラウザの真ん中に位置します.
top: 50%; margin-top:-75 pxの理屈は同じです.