Fall in IT.

div 태그 수직(vertical) 가운데 정렬하는 방법 본문

프로그래밍언어/Html & Css

div 태그 수직(vertical) 가운데 정렬하는 방법

D.Y 2017. 10. 12. 13:31
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.


안녕하세요. 
오늘은 <div> 태그를 가운데 수직
 가운데 정렬하는 방법에 대해서 알아보겠습니다.



<div> 태그 수직(horizontal) 가운데 정렬하는 방법

  • parent의 div position이 relative, child의 div position이 absolute 일 경우
    - sample code)
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            .parent {
                position: relative;
                width: 500px;
                height: 500px;
                border: 3px solid tomato;
            }
            .child {
                width: 200px;
                height: 200px;
                border: 3px solid green;
                margin: auto;             position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="child">
                hello world
            </div>
        </div>
    </body>
    </html>
  • 결과
  • parent와 child의 div position이 기본(static) 또는 relative일 경우
    - sample code )

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            .parent {
                width: 500px;
                height: 500px;
                border: 3px solid tomato;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .child {
                width: 200px;
                height: 200px;
                border: 3px solid green;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="child">
                hello world span
            </div>
        </div>
    </body>
    </html>
  • 결과
    - 위와 동일합니다.




모두 즐거운 코딩하세요~


0 Comments
댓글쓰기 폼