html, css 가운데 정렬 총 정리

/* flexbox를 이용한 기본형 */

.box{
display: flex;
justify-content: center;  /*content가 여러 개일 때는 space-between이나 space-around 등을 선택*/
align-items: center;

/* box 안에 content 중 몇 개만 정렬하고 싶을 때 각각 padding을 이용하여 위아래에 같은 공간을 둘 수 있음
 단, padding 때문에 block이 커지므로 box-sizing: border-box를 같이 쓰도록 하자*/

*{
box-sizing: border-box;
}

.box2{
display: flex;
justify-content: center;
padding: 40px 0px;
}

/* fixed된 block을 가운데 두고 싶을 때
상하 margin을 0, 좌우 margin을 auto로 해놓고, 좌우를 0으로 해놓으면 가운데에 놓임*/

.box2{
margin: 0 auto;
left: 0;
right: 0;
}