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

Recent Posts

Tags more

Archives

관리 메뉴

Fall in IT.

프로그래밍언어/Html & Css

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>

모두 즐거운 코딩하세요~

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

Comments