300x250
html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="ex.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<form>
<input id="box">
</form>
</div>
</body>
</html>
css
.wrapper{
width:300px;
height: 80px;
background-color: blue;
display: flex;
align-items: center;
justify-content: center; /*왼쪽오른쪽 가운데정렬*/
}
.wrapper>form>#box{
width: 200px;
height: 30px;
margin: 0 auto;/*왼쪽오른쪽 가운데정렬*/
}
결과
300x250
반응형
'Web > CSS' 카테고리의 다른 글
| [CSS] em,vw 단위 최소 글자크기 설정하는 방법 (0) | 2023.02.08 |
|---|---|
| [CSS] 폰트 사이즈 단위에 대하여 간단정리(em,vw,vh,px,rem) (0) | 2023.02.08 |
| [css] 나눔스퀘어라운드 웹폰트 적용하는 방법 (0) | 2023.01.30 |
| [web] 키보드 활성시 ui밀림 줄어듬 현상 방지방법 / 하단 고정 레이아웃 이슈 참고사이트 (0) | 2022.07.12 |
| [css] 두줄로 넘어가지않게 방지하는 옵션 (0) | 2022.01.31 |
댓글