창크기를 변경해도 가운데에 있게 만들 수 있는 방법입니다.
로고를 대문으로 또는 임시 안내문구등을 넣을때 활용하면 좋을것 같아요.
먼저 html를 만들어줍니다.
HTML
|
1
2
3
|
<div class="logo_box">
<a href="#"><img src="https://via.placeholder.com/300x300.png?text=logo+sample" alt="LOGO"></a>
</div>
|
cs |
CSS
|
1
2
3
|
html{height: 100%;}
body{position: relative;width: 100%;height: 100%;}
.logo_box{position: absolute;top: 50%;left: 50%;margin:-150px 0 0 -150px}
|
cs |
아주 간단하다. 가운데 정렬하고 싶은 콘텐츠를 position:absolute를 주고, 부모에게 position:relative를 준다. 컨텐츠를 top에서 50%만큼 left에 50%만큼 밀어낸 후 마진으로 컨텐츠의 크기의 반만큼(-150px) 다시 돌아오도록 한다. (여기서 html에 height:100%를 주지 않으면 세로 가운데 정렬이 되지 않는다. )
더 자세한 가운데 정렬 방법들
2019/03/06 - [퍼블리싱/HTML&CSS] - [css]div 가로 중앙 정렬 하는 방법
2018/05/15 - [퍼블리싱/HTML&CSS] - [css]div 세로 가운데 정렬하는 방법
'퍼블리싱 > HTML&CSS' 카테고리의 다른 글
| [CSS]배경이미지에만 OPACITY 적용(multiple효과) (0) | 2020.06.30 |
|---|---|
| [CSS]박스사이징(box-sizing) 활용하기 (0) | 2020.06.18 |
| [CSS]텍스트 조정하기(자간/어간/줄간격/다단) (0) | 2020.05.11 |
| A태그 막는 방법(CSS/ jQuery) (0) | 2020.04.20 |
| (HTML)임시이미지 간단히 넣는 방법 (1) | 2020.04.13 |
