웹 디자인을 하다보면 가장 많이 쓰는데 또 맨날 까먹는 것 중에 하나가 바로 가운데 정렬이다.
무의식적으로 바로 text-align : center 사용하고는
아 왜 안되지?
그다음은 이제, vertical-align : middle 사용하고는
아 왜 안되지?
무한 반복하다가, 아 맞다....하고는 최후의 수단? 만병통치약으로 사용하는 것이 바로 position을 사용한 가운데 정렬이다.
<html>
<div class="a_box">
<div class="b_box">
안녕?
</div>
</div>
</html>
<style>
.a_box{
position: relative;
}
.b_box{
position: absolute;
top: 50%;
left : 50%;
transform: translate(-50%, -50%);
}
</style>
레알 만병통치약이다.
부모 클래스에는 position : relative;
자식 클래스에는 position : absolute; top: 50%; left : 50%; transform: translate(-50%, -50%);
'programming' 카테고리의 다른 글
| [Web] 색상 코드 추출하기 (컬러콥 color cop 추천 및 오류 해결) (0) | 2022.01.20 |
|---|---|
| [Web] url로 queryparameter 쿼리파라미터 가져오기 (0) | 2022.01.19 |
| [Web] css 한 줄에 여러가지 색깔 넣기 (0) | 2022.01.17 |
| [Web] ajax로 불러온 요소(element)에 접근하기 (0) | 2022.01.12 |
| [Web] html 안에 html 넣기 (html import 하는 방법) (0) | 2022.01.11 |
