정렬 Tip

Web/🧩 html + CSS

정렬 Tip

dalpaeng 2020. 11. 3. 22:07

1. 수평 가운데 정렬

자신요소에 marign : auto; 를 사용하면 수평 가운데 정렬을 합니다.

<html>
  <head>
    <style>
      div#container {
        width: 300px;
        height: 300px;
        background-color: lightskyblue;
      }
      div#me {
        width: 100px;
        height: 100px;
        background-color: lightseagreen;

        margin: auto;
      }
    </style>
  </head>

  <body>
    <div id="container">
      <div id="me"></div>
    </div>
  </body>
</html>

2. 수직 가운데 정렬

부모 요소에

display: flex;

align-items: center; 를 사용하면 수직 가운데 정렬을 합니다.

<html>
  <head>
    <style>
      div#container {
        height: 300px;
        width: 300px;
        background-color: lightskyblue;

        display: flex;
        align-items: center;
      }
      div#me {
        width: 100px;
        height: 100px;
        background-color: lightseagreen;
      }
    </style>
  </head>

  <body>
    <div id="container">
      <div id="me"></div>
    </div>
  </body>
</html>

저작자표시