중앙 정렬 방법, header 정렬

1.

display:flex;

justify content: center;

align-items: center;사용하기

 

2..

margin: auto;

메인 콘텐츠 컨테이너를 수평 중앙에 둘 때 사용

display가 inline, inline-block일 때 작동하지 않음

 

3..

text-align: center;

inline, inline-block 일 때 수평 중앙에 둘 때 

주로 line-height 와 같이 사용해 수직 중앙도 맞춤 

 

4..

position:absolute;

left:50%;

top: 50%;

trnasform:trnaslate(-50%, -50%);

 

5.

display: grid;

place-content: center;

---

header 정렬하기

 

 

1.

 

<div class="status-bar">
 <div class="status-bar__column">햄버거버튼</div> 
 <div class="status-bar__column">로고</div>
 <div class="status-bar__column">아이콘</div>
</div>

.status-bar{
display:flex;
justify-content: center;
}

.status-bar__column{
 width: 33%;
}

.status-bar__column:nth-child(2) {
  display: flex;
  justify-content: center;
}

.status-bar__column:last-child {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

---

 

2.

 

아이콘, 글자, 아이콘(두가지) 세가지 컬럼으로 구성된 구조에서
alt-header{ displayflex alignitems center justify-content:center}
alt-header__column{width:33%;}
.alt-header__column:first-child{
    margin-right: auto;
}
.alt-header__column:nth-child(2){
    text-align: center;
}
.alt-header__column:last-child{
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
}

 

꿀팁 부모에 displayflex alignitemscenter justifycontentcneter 준후
첫번째 자식요소에 margn-right auto; 두번째 자식에 text-align center세번째 자식에 margin-leftauto;주면 세개가 맞춰짐
absolute, center로 사용하는것은 css에서 이상하게 보여서 핵을 사용함