flex
{
display: flex;
justify-content: center;
}
margin auto
{
margin: 0 auto;
}
- margin: auto는 위아래 혹은 좌우의 마진을 동일하게 준다
- 단!!!!!! block 형태는 이미 칸을 다 차지하고 있어 배째라 하며 여백을 만들어주지 않는다.
- 이럴 땐 가운데 정렬을 원하는 태그의 width를 설정해주면 된다!!!
text-align
{
display: inline;
display: inline-block;
text-align: center;
}
- inline과 inline-block(img 등)은 text align으로 조정 가능하다
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
- absolute가 아니어도 어지간히 먹혔던 것 같은데...아닌가?? 암튼! 혹시 안 되면 꼭 absolute를 넣어주자!
- 모든 요소들은 무게중심이 가운데가 아닌 왼쪽 상단(11시 방향)에 맞춰져 있다.
- 따라서 50%를 주면 내가 생각한 것보다 조금 더 튀어나갈 것이다.
- 이럴 때 transform을 이용해 가운데로 당겨주자!