[css] flex로 간단하게 수직&수평 가운데 정렬

 

 

 

 

로그인 페이지나 로딩 페이지 등을 제작할 때 

페이지 전체의 수직, 수평으로 요소를 배치하는 경우가 많다. 

 

보통 margin: 0 auto 로 수평 정렬을 쉬이 되나 수직정렬을 쉽지 않다.

css flex를 사용하면 좀더 손쉽게 수평, 수직 정렬이 가능하다.

 

 

 

결과 

 

 

 

HTML

<div class="flex_container">
  <div class="flex_item">
    <img src="https://developer.apple.com/assets/elements/icons/mac-app-store-11/mac-app-store-11-64x64.png" alt="">
    <p>Download</p>
  </div>
</div>

 

CSS

body{
  height: 100vh;
  background: #f5f5f5;
}
.flex_container{
  height: 100%;
  display:flex;
  justify-content:center;
  align-items:center;
}
.flex_item{
  margin-top:-20px;
  text-align:center;
}
.flex_item p{
  font-size: 16px;
  color: #999;
  margin:0;
  text-transform: uppercase;
  font-weight: bold;
}

 

위 중에서 아래 세가지를 반드시 선언해준다. 

 

  display:flex;
  justify-content:center; 수평정렬 
  align-items:center; 수직정렬