요소를 중앙으로 가져 오는 요약 (HTML, CSS)

요소를 중앙에 가져오는 방법을 매번 잊어버리므로 정리해 보았습니다.
그 밖에도 방법이 있을지도 모르기 때문에, 눈치채는 분이 있으면
코멘트 받을 수 있으면 다행입니다.

①문자열의 높이를 중앙으로 한다

index.html

    <style>
    .container {
     height: 100px;
     position: relative;
     box-sizing: border-box;
     border: 5px solid #76d3f4;
     box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25);
     margin: 20px 0px;
    }     
   .char_heigth-center {
     /*文字要素の高さを整える*/
     line-height: 100px;
    }
    </style>
    <div class="container">
      <p class="char_heigth-center">文字の高さを中央に</p>
    </div>

결과


②문자의 가로폭을 중앙으로 한다
text-align:center; 하지만 가능하지만, 개행하여 복수행이 되면
둘 다 중앙 정렬이므로 구분이 필요합니다.

index.html

    <style>
    .container {
    ・・・
    }
    .char_width-center {
       display: flex;
       justify-content: center;
     }
    </style>
    <div class="container">
      <p class="char_width-center">文字の横の配置を中央に</p>
    </div>

결과


③ 연속한 문자 요소를 중앙에 배치(세로와 가로를 중앙으로)

index.html

    <style>
    .container {
    ・・・
    }     
    .char_heigth-center {
     line-height: 100px;
    }
    .char_width-center {
     display: flex;
     justify-content: center;
    }
    .disflex {
     display: flex;
    }
    .items {
      margin-right: 10px;
    }
    </style>
    <div class="container">
      <div class="disflex char_heigth-center char_width-center">
        <p class="items">文字列1</p>
        <p class="items">文字列2</p>
        <p class="items">文字列3</p>
      </div>
    </div>

결과


④ 문자열 이외의 배치를 중앙으로 한다
이미지처럼 중간 문자열은 중앙에 배치되지 않으므로 주의

index.html

    <style>
    .container {
    ・・・
    }       
   .element-center {
     width: 60%;
     height: 60%;
     margin: auto;
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     border: 5px solid #ff0000;
     box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25);
    }
    </style>
    <div class="container">
      <div class="element-center">テスト</div>
    </div>

덧붙여 : 이하의 구문에서도 가능한 것 같습니다.
.element-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
　 또는 부모 요소에
.element-align {
display: flex;
justify-content: center;
align-items: center;
}
※position 은 요소마다를 중앙 배치할 수 있지만,
flex는 부모 요소의 내용 모두가 중앙 배치가 되기 때문에, 구분은 필요합니다.
추기 2:우측 하단에 배치하는 경우는 다음과 같이 한다
.element-right-bottom{
position: absolute;
right: 0;
bottom: 0;
}

결과