Margin Auto 가운데 정렬

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin auto</title>
    <link rel="stylesheet" href="css/02_margin_auto.css">    
</head>
<body>
    <center><h1>margin auto</h1></center>
    <div class="containter">
        <header></header>
        <!-- (section>h2{margin : auto;})*3 -->
        <section>
            <h2>margin : auto;</h2>
        </section>
        <section>
            <h2>margin : auto;</h2>
        </section>
        <section>
            <h2>margin : auto;</h2>
        </section>

        <footer></footer>
    </div>
</body>
</html>
HTML
복사

CSS

.container {
    position: relative;
    width: 1200px;
    border: 3px dashed orange;
    margin: auto;
}

header {
    width: 100%;    /* w100p */
    height: 80px;
    border: 3px solid gray;
    background-color: slateblue;
}

section {
    width: 900px;
    height: 200px;
    border: 3px solid gray;
    margin: auto;           /* 👩‍🏫가운데정렬 */
}

footer {
    width: 100%;
    height: 150px;
    border: 3px solid gray;
    background-color: orange;
    margin: auto;
}
CSS
복사