반응형
1. flex이용
justify-content:center, align-items:center이용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS 연습</title>
<link rel="stylesheet" href="index.css" />
<style>
.containor {
background: yellow;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
}
#img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="containor">
<img id="img" src="cafelatte.png" />
</div>
</body>
</html>2. margin 이용
컨테이너에 display:flex를 설정하고
이미지에 margin을 auto 로 준다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS 연습</title>
<link rel="stylesheet" href="index.css" />
<style>
.containor {
background: yellow;
height: 400px;
display: flex;
}
#img {
width: 100px;
height: 100px;
margin: auto;
}
</style>
</head>
<body>
<div class="containor">
<img id="img" src="cafelatte.png" />
</div>
</body>
</html>
반응형
'개발 > CSS' 카테고리의 다른 글
| 다른 요소에 hover 효과 넣기(css 결합자를 이용) (0) | 2022.02.21 |
|---|---|
| li 태그에서 들여쓰기 하는 법 (0) | 2022.02.19 |
| float : 인라인요소가 자신을 감싸는 컨테이너의 좌우측에 붙는다. (0) | 2022.02.19 |
| flex-wrap : 강제로 한줄배치 (0) | 2022.02.19 |
| text-spacing : text-indent, letter-spacing, line-height, word-spacing, white-space (0) | 2022.02.15 |
