[CSS] margin을 이용한 중앙정렬

Soroya 2022. 10. 7. 20:00

728x90

코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      body{
          background-color:yellow;
      }
    .mytitle{
        height: 200px;
        width: 300px;

        background-image: url("https://post-phinf.pstatic.net/MjAyMDAyMjlfMjY4/MDAxNTgyOTU0Nzg3MjQ4.PBMFV4WrSJmeSUJ56c4C7Vkz_SsQlJ1SByKU18kkJh0g.T7mQnadCWVtEZ448AGk_9kG1HFBAzdztXZcBjvSbduwg.JPEG/고양이_나이1.jpg?type=w1200");
        background-size: cover;
        background-position: center;

        border-radius: 10px;
        padding-top: 20px;
        text-align: center;
        color: yellow;
    }
    .wrap{
        width: 300px;
        background-color: green;
    }
  </style>
  <link rel="stylesheet" href="../../../Hanghae99/Frontend/prac.css">
</head>
<body>
  <div class="wrap">
    <div class="mytitle">
      <h1>로그인 페이지</h1>
      <h4>아이디, 비밀번호를 입력해주세요</h4>
    </div>
    <p>ID: <input type="text"/></p>
    <p>PW: <input type="text"/></p>
    <button>로그인 하기</button>
  </div>
</body>
</html>

노란색 배경이 <body> 초록색 배경이 <wrap>이다.

<wrap>을 화면 중간을 가져오기 위해 <wrap>태그에 margin: auto 를 추가해주면

이렇게 화면 중앙에 요소를 배치해 줄 수 있다.

728x90