CSS 중앙정렬

공부 2019. 1. 30. 11:13

<!DOCTYPE html>
<head>
    <meta charset="utf-8">

    <title>TEST</title>
    <style>
        .outer{
            position:relative;
            margin:20px 0;
            width:100%;
            height:100px;
            background-color:hsla(0, 0%, 0%, .4)
        }
        .inner{
            width:30px;
            height:30px;
            background-color:hsla(300, 100%, 50%, .5)
        }
        .flex-center{
            display:flex;
            align-items:center;
            justify-content:center
        }
        .margin-center{
            position:absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            margin:auto;
}
        .transform-center{
            position:absolute;
            top:50%;
            left:50%;
            transform:translateY(-50%) translateX(-50%)
        }
    </style>
</head>
<body>
    <h3>flex</h3>
    <div class="outer flex-center">
        <div class="inner"></div>
    </div>

    <h3>margin</h3>
    <div class="outer">
        <div class="inner margin-center"></div>
    </div>

    <h3>transform</h3>
    <div class="outer">
        <div class="inner transform-center"></div>
    </div>
</body></html>