css
12장 예제 - 플렉스 박스 레이아웃을 사용해 화면 중앙에 배치하기
쥬크버그
2023. 4. 4. 01:28
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>플렉스 박스 레이아웃을 사용해 화면 중앙에 배치하기 </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
margin:0;
box-sizing:border-box;
}
body {
background:url("images/bg5.jpg") no-repeat left top fixed;
background-size:cover;
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
}
button {
background-color:#ccc;
font-size:1.2em;
padding: 1em 2em;
border:none;
border-radius: 5px;
box-shadow:1px 1px 2px #fff;
}
</style>
</head>
<body>
<button>클릭!</button>
</body>
</html>
