<!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>
'css' 카테고리의 다른 글
| 12장 예제 - 칼럼과 줄 크기를 자동으로 지정하기 (0) | 2023.04.04 |
|---|---|
| 12장 예제- 그리드 박스에서 칼럼과 줄 지정하기 (0) | 2023.04.04 |
| 12장 예제 - 여러 줄일 때 교차축에서 플렉스 항목 간의 간격 지정하기 (0) | 2023.04.04 |
| 12장 예제- 플렉스 박스에서 특정 항목만 정렬 방법 지정하기 (0) | 2023.04.04 |
| 12장 예제 - 플렉스 박스에서 교차축 정렬 방법 지정하기 (0) | 2023.04.04 |
