=============중앙정렬=============
[자식이 {display: inline-block;} 인 것(글자 포함)] 
<if> display: static;[기본값]
text-align:center; //가로 정렬 

[테이블 내부]
<if> 부모 { display: table; } & 자신 { display: table-cell; }
{ vertical-align: middle; } //세로 중앙 정렬

[태그]
<if> { display : inline-block; }
{ margin:0px auto; } //가로 정렬(중앙)


<if> { display: flex; }
justify-content: center; // 가로 정렬
align-items: center; // 세로 정렬(한 줄을 기준)
flex-wrap:wrap; align-content: center; // 세로 정렬(두 줄부터)
//단, { flex-wrap:no-wrap; }이면, align-content를 사용해도 적용이 되지 않는다.

{ display: flex; } 태그의 자식에는 다음처럼 적용할 것
justify-self: center; // 가로 정렬
align-self: center; // 세로 정렬
//단, 부모의 align-content속성이 없어야 제대로 적용이 된다.

<if> position:absolute | relative | fixed | sticky; // 즉 static만 아니면 됨
left|right:0; top|bottom:0;

left: 50%; margin-left: -{태그의 width}; // 가로 정렬(중앙)
top: 50%; margin-top: -{태그의 height}; // 세로 정렬(중앙)

left: 50%; transform: translate(-50%, 0); // 가로 정렬(중앙)
top: 50%; transform: translate(0, -50%); // 세로 정렬(중앙)

height:100px; line-height:100px; // 세로 정렬(중앙) // 오직 텍스트만

:before {
    content: "";
    height: 100%;
    display: inline-block;
    vertical-align: middle;

    width: 1px; margin-right: 0; //정확한 중앙이 아니라서 보정하는 것
}

=============배치=============
float:left | right; //좌측 끝, 우측 끝에 배치
<다만> { display : inline-block; margin:0; } 으로 자동 변환됨

// float를 쓴 후 다음 태그에 clear:both; 가 없으면, 오류가 발생할 수 있음
// 다음에 <p style="clear:both;"></p>를 넣어서 해결하거나
// overflow:auto; 로도 오류 해결 가능


//flex-grow: 1; 가로 나머지를 채움