집 >웹 프론트엔드 >JS 튜토리얼 >html+css의 수직 센터링 컨테이너

html+css의 수직 센터링 컨테이너

php中世界最好的语言원래의: 2018-03-12 16:39:221517검색

이번에는 html+css의 수직 중앙 컨테이너를 가져왔습니다. html+css의 수직 중앙 컨테이너 사용 시 주의사항은 무엇인가요?

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{            margin: 0;            padding: 0;
        }        .parent{            width: 400px;            height: 400px;            border:1px solid gray;            position: relative;
        }        .child{            width: 100px;            height: 100px;            top:0;            left:0;            right:0;            bottom:0;            margin:auto;            background: pink;            position: absolute;
        }    </style></head><body>
    <div class="parent">
        <div class="child"></div>
    </div></body></html>

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!