中央揃え要素

一生懸命勉強しましたが、使うたびに検索?
これは整理するという意味です!

body{
  margin: 0;
}
.content{
  width: 400px;
  background-color: gray;
}

画面にこのような要素があるとしましょう.
この要素を縦+横に中央に揃えたいです.
1.positionプロパティ[inline-block]を使用する
親の体を基準にしているので、絶対位置合わせします.
absoluteは自分の位置を親に合わせます.
(他の要因の影響を受けない!)

.content{
  width: 400px;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: gray;
}

私が欲しい位置でも画面の真ん中でもない.top: 50%は上から中へ、left: 50%は左から中へ.
正しい真ん中の位置は.content要素の起点になります.
このため、長方形の横の長さの半分を左に移動します.
垂直方向の長さを半分上に移動すると、画面の真ん中に移動します.
2. margin: 0px auto; [条件:block,width]の使用
(水平位置合わせ)
本当に簡単でよく使いますが、少し注意が必要です.
ソートする要素にはdisplay:blockのプロパティがあります.widthサイズは指定する必要があります.

1. 
margin-left: auto;
margin-right: auto;
2.
margin: 0px auto;
3. (안됨!)
margin-top:auto;
margin-bottom: auto;
// margin-top, margin-bottom가 auto일 경우 0으로 취급된다!

top、bottomをautoに設定する場合は、親コンテナでdisplay: flex;プロパティと가로, 세로サイズを指定できます.

flexプロパティの使用
marifyを使用する第2の方法は簡単ですが、お勧めしません.
エレメント間でインタラクションを行うと、高さ値全体が分からないためです.flex、justify、alignを利用する.
flexは、自分が所有しているコンテンツの横方向の長さだけを占有します.

body{
  margin: 0;
  display:flex;
  height: 100vh;
  justify-content: center;	//가로 정렬
  align-items: center;		//세로 정렬
}
.content_wrapper{
  display:flex;
  width: 400px;
  height: 400px;
  background-color: gray;
}
.content{
  display:grid;
  width:100%;
  justify-content: center;
  align-items: center;
}

あなたが望むように、これは要素が真ん中にある光景です.
コードを作成し、コンテンツの内部も真ん中に配置します.
1分間のエンコードページがうまく整理されています.👍🏻
気になる方は以下のソースリンクをご覧ください🌈
[ソース]

[css]要素または要素を中央に位置合わせする方法(div)

今回はCSS Flexについて学びます。