반응형
기준
<div class="parent">
<div class="child"></div>
</div>
1. Flexbox 사용
.parent {
/* 상하좌우 정중앙 정렬하기 */
display: flex;
justify-content: center;
align-items: center;
}
.child {
}
2. CSS의 Transform과 Translate 사용
.parent {
/* 설정 */
position: relative;
}
.child {
/* 상하좌우 정중앙 정렬하기 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
[참조 URL]
반응형
'CSS' 카테고리의 다른 글
table 태그에서 텍스트가 넘어갈 경우 (0) | 2023.09.19 |
---|---|
CSS 테두리 선으로 삼각형 화살표 만들기 (0) | 2022.11.24 |
background-image 명도 조절 (linear-gradient) (0) | 2022.10.27 |
table 태그에 직접 적용 안되는 속성들 (0) | 2022.09.28 |
HTML input number maxLength 설정하기 (0) | 2022.09.26 |
댓글