I'm

Developer, Designer, Photographer

GET IN TOUCH

  • Buk-gu, Busan, Republic of Korea
  • ungdoli0916@naver.com
  • Kakao ID : Ungdoli
Your message has been sent. Thank you!
(즐거웅코드) CSS position absolute 요소 가운데 정렬하기 (가로축, 세로축)

· 즐거'웅' 코드 (Source)/HTML & CSS & JAVASCRIPT
2019. 8. 8. 00:34

반응형

[즐거'웅'코드] 목차

  1. CSS
  2. 예제 소스
  3. 구현 예시
CSS
1
2
3
4
5
6
7
8
 
<style>
    .test_obj {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>
예제 소스
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<div class="test_obj">
    absolute
</div>
 
<style>
    .test_obj {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
  
        width: 100px;
        height: 100px;
        background-color: #e45e28;
    }
</style>
구현 예시
반응형
저작자표시

'· 즐거'웅' 코드 (Source) > HTML & CSS & JAVASCRIPT' 카테고리의 다른 글

(즐거웅코드) CSS 글이 길어서 넘칠 때 가리기(숨기기)  (0) 2019.12.06
(즐거웅코드) 제이쿼리 비밀번호 일치 여부 체크하기  (2) 2019.10.20
(즐거웅코드) 자바스크립트 클립보드로 복사하기  (0) 2019.08.21
(즐거웅코드) 자바스크립트 text 내용 바꾸기  (0) 2019.07.15
(즐거웅코드) 제이쿼리 항상 최신 버전으로 사용하기 (CDN 선언)  (0) 2019.07.14

관련글

댓글 0

티스토리툴바