
로그인하기 버튼을 중앙으로 옮겨보려고 동일하게 "margin: auto;"를 사용하였는데 실패하였습니다.
alignment: center;
align: center;
등도 시도해 보았지만 실패하였습니다.
무슨 이유일까요?
alignment와 align 은 무슨 차이가 있는 것인가요?
왜 간단히 align 혹은 alignment 를 사용하여 중앙 정렬을 할 수 없는 것인가요??
보고 계신 화면 전체를 캡처해 주시

면, 튜터님들이 빠르게 상황을 이해할 수 있어요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인 페이지</title>
<style>
.mytitle{
width: 300px;
width: 300px;
height: 200px;
color: white;
text-align: center;
background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
background-size: cover;
background-position: center;
border-radius: 10px;
padding-top: 40px;
}
.wrap{
background-color: green;
width: 300px;
margin: auto;
}
.btn{
width:100px;
margin : auto;
alignment: center;
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해 주세요</h5>
</div>
<h1>로그인 페이지</h1>
<p>ID: <input type="text" /></p>
<p>PW: <input type="text" /></p>
<button class="btn">로그인 하기</button>
</div>
</body>
</html>
