Fall in IT.

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

프로그래밍언어/Html & Css

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

D.Y 2017. 10. 12. 13:31
반응형


안녕하세요. 
오늘은 <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>
  • 결과
    - 위와 동일합니다.




모두 즐거운 코딩하세요~


반응형
저작자표시 비영리 (새창열림)

'프로그래밍언어 > Html & Css' 카테고리의 다른 글

checkbox 디자인 변경하는 방법  (0) 2018.07.03
패딩 영역은 제외하고 백그라운드 색상 입히는 방법  (0) 2017.12.07
div 태그 수평(horizontal) 가운데 정렬하는 방법  (0) 2017.10.11
em, rem 개념 정리하기  (0) 2017.09.27
Flex를 사용하여 웹페이지 레이아웃 잡는 방법  (0) 2017.03.04
공유하기 링크
'프로그래밍언어/Html & Css' Related Articles more
Comments