[HTML/CSS] flex 사용 시 가운데 정렬

기본 상태

//html
<div id="outer_wrapper">
    <div id="inner_wrapper">안녕하세요!</div>
    <div id="inner_wrapper">hello!</div>
</div>

//css
#outer_wrapper{
  display: flex;
}

#inner_wrapper{
  border: solid 1px black;
}

1. flex-direction: column일 경우

align-items: center 사용

//css
#outer_wrapper{
  display: flex;
  flex-direction: column;
  align-items: center;
}

#inner_wrapper{
  border: solid 1px black;
}

2. flex-direction: row일 경우

justify-content:center 사용

//css
#outer_wrapper{
  display: flex;
  flex-direction: row;
  justify-content: center;
}

#inner_wrapper{
  border: solid 1px black;
}