작업을 하면서 보통은 flex를 사용하지만, 때에 따라 margin을 사용해 정렬이 필요한 경우 막상 사용하려면 기억이 나지 않아서 기록해두려한다. 😅
margin으로 좌우 가운데 정렬하는 법
<!Doctype ~>선언이 제대로 되었는지 확인- auto는 자동으로 사이즈를 설정해주는 값인데 그러기 위해서는 넓이 값을 정확하게 설정이 되어 있어야합니다.
margin: 0 auto;가 반응하지 않을 시 부모의 넓이 값이 제대로 설정되어 있는지 확인 - inline 속성에는 적용이 되지 않습니다. 이유는 inline 속성은 자기 자신 만큼의 영역값을 갖기 때문입니다. 이런 경우에는 block 속성의 태그로 변경해 사용하거나 해당 태그의 display 속성을 block으로 바꾸어 줍니다.
<span></span>->display: block;or<span></span>-><div></div>
++ Oct.10.2022 추가
position: fixed 또는 absolute 사용 시 margin으로 가운데 정렬
- 부모 요소에 width값이 100% 또는 값이 들어가 있어야합니다.
- 가운데 정렬을 할 요소에 다음과 같은 속성을 작성해 줍니다.
position: fixed;
left: 0;
right: 0;
margin: 0 auto; // 상황에 따라 상하단 값을 설정해 주어도 무방합니다.- 그 외
z-index값이나width값을 추가해 주는 것도 가능합니다.
<head>
<style>
.contents {
position: fixed;
left: 0;
right: 0;
margin: 0 auto;
}
<style>
</head>
<body>
<div class="container">
<div class="contents"></div>
</div>
</body>flex를 사용한 가운데 정렬하는 법
좌우 가운데 정렬
- 가운데 정렬을 하고 싶은 요소의 부모 태그에
display: flex;를 적용 - 같은 부모 태그에
justify-content: center;적용
// css
.parent {
display: flex;
justify-content: center;
}
.child {
width: 50px;
height: 50px;
background-color: orange;
}
// html
<div class="parent">
<div class="child"></div>
</div>상하 중앙 정렬
- 우선 정렬하고 싶은 요소의 부모 태그에 정확한 높이 값을 지정
- 부모 태그에
align-items: center;을 적용
// css
.parent {
display: flex;
align-items: center;
height: 300px;
background-color: grey;
}
.child {
width: 50px;
height: 50px;
background-color: orange;
}
// html
<div class="parent">
<div class="child"></div>
</div>