1. 가운데 정렬 text-align : center;
내용의 텍스트와 이미지같은 인라인 요소의 가운데 정렬은 부모가되는 블록 요소에 text-align:center; 를 지정하는 것으로 간단히 지정할 수 있습니다.
.parent{
text-align: center;
}
2. 가운데 정렬 margin : 0 auto;
1 번과 함께 가장 친숙한 방법으로 부모가 되는 블록 요소에 margin: 0 auto; 를 넣어 줍니다.
.parent{
width: 80%;
margin: 0 auto;
max-width: 500px;
}
width지정이 필수. % 로 지정하면 반응형 디자인에 대한 대응이 가능합니다. PC 뷰에 최대 폭을 결정하기 위해 max-width을 사용할 수도 있습니다.
3. 상하 좌우 가운데 정렬 vertical-align : middle;
내용을 상하방향으로 가운데 정렬을 하고 싶을 때는 vertical-align 을 사용합니다. "vertical-align" 을 사용할 수있는 인라인 요소 테이블 셀 중 하나 이므로 상하 가운데 정렬 텍스트를 내포하는 요소에 display: table-cell; 를 지정합니다.
.parent{
display: table-cell;
vertical-align: middle;
}
4. 상하 좌우 가운데 정렬 position : absolute; + margin : auto;
계속해서 position+ margin 으로 내용을 상하방향 가운데 정렬하는 방법입니다. 블록은 width, height지정이 필수 입니다.
.parent{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 80%;
height: 3.2rem;
}
5. 기타 trnasform, flex
다른 방법으로는 trnasform, flex 을 사용하는 방법이 있습니다.