가운데 정렬하기

1.margin사용하기

<header>
  <div class="inner">
    안녕하세요
  </div>
</header>

body{
  margin:0;
}

header{
  background-color:blue;
}

header .inner{
  background-color:yellow;
  width:500px;
  margin:0 auto;
}

• 중앙에 정렬시키고자 하는 태그에 넓이 값을 준다
• margin을 통해 오른쪽/왼쪽 auto값을 주면 가운데로 정렬된다
  *화면을 확대할 경우 왼쪽을 기준으로 오른쪽이 잘리는 것을 볼 수 있다

2.position사용하기

<header>
  <div class="inner">
    <div class="box">box</div>
  </div>
</header>

body{
  margin:0;
}

header{
  background-color:yellow;
}

header .inner{
  background-color:red;
  width:100px;
  margin:0 auto;
  height:100px;
  position:relative;
}

header .inner .box{
  border:2px solid black;
  position:absolute;
  top:0;
  bottom:0;
  height:20px;
  margin:auto 0;
}

-가운데로 정렬하고자하는 태그에 position:absolute를 입력해준다
* 가운데로 정렬하고자하는 태그의 부모요소에 position:relative를 입력해준다
-초기값으로 top:0 bottom:0을 넣어준다
-가운데로 정렬하고자하는 태그의 높이값을 입력해준다
-margin으로 위아래 auto를 주어 가운데로 정렬시킨다

3.display사용하기

<header>
  <div class="inner">
    <div class="box">box</div>
  </div>
</header>

body{
  margin:0;
}

header{
  background-color:yellow;
}

header .inner{
  background-color:red;
  width:100px;
  margin:0 auto;
  height:100px;
  align-items:center;
  display:flex;
}

header .inner .box{
  border:2px solid black;
}

• 가운데로 정렬하고자하는 태그의 부모요소에 display:flex를 넣어준다
• 상하 가운데 정렬을 위해 align-items:center를 입력한다

4. left:50% 사용하기

<header>
  <div class="item"></div>
</header>

body{
  margin:0;
}

header{
  background-color:yellow;
  height:100px;
  width:150px;
  position:relative; 
}

header .item{
  background-color:red;
  height:50px;
  width:50px;
  position:absolute;
  left:50%;
  transform: translate(-50%,0);
}

• 옮기고자하는 태그의 넓이와 높이값을 준다
• position을 주어 옮겨져야하는 위치의 값을 준다
• left:50%를 주어 item태그가 왼쪽에서 50%지점으로 갈 수 있도록한다.
• 그 다음 transform 의 translate(x축,y축)을 이용해 -50%씩 주면 가운데 정렬이 가능하다