728x90
728x90
이건 제가 자주 사용하는 css 인데요
쓸때마다 검색을 하는 상황이 생겨서,,ㅎ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body { height: 3000px; background: #ddd; }
.scrollLock { overflow: hidden; }
.popup {
height: 3000px;
width: 500px;
}
.popup_div {
width: 90%;
background: blue;
color : #ffffff;
font-size: 20px;
line-height : 300px;
text-align: center;
}
</style>
</head>
<body>
<div class="popup">
<div class="popup_div">
<p>POPUP</p>
</div>
</div>
</body>
</html>저번 popup 스크롤 막기 예제를 이용하겠습니다 ㅎ
파란색 박스를 가운데로 옮겨 보겠습니다!
.center_div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}css를 가운데 정렬하고 싶은 < div > 안에 넣어주세요!
저는 .popup_div 에 추가했어요!
간단하게 가운데 정렬이 된답니다!
728x90
728x90
'CSS' 카테고리의 다른 글
| 알림 활성화 / 비활성화 타원형 버튼 만들기 (1) | 2024.02.22 |
|---|---|
| user-select 텍스트 선택 효과 지우기 (1) | 2024.02.22 |
| 팝업 화면에서 스크롤 기능 막기! (2) | 2023.01.15 |
| Input tag에 [숫자]만 입력하고 싶을 때 Tip! (1) | 2023.01.14 |
댓글