수직정렬
1) line-height : 텍스트이며 1줄인경우
2) transform: translate(50%, 50px) : transform이 적용되는 Element의 크기 기준 %
부모 요소 사이즈가 변해도 정렬이 되도록
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{box-sizing: border-box;}
div{border: 1px solid black;}
.wrapper{
width: 300px;
height: 300px;
line-height: 300px;
position: relative
}
.box{
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left:50%;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{box-sizing: border-box;}
div{border: 1px solid black;}
.wrapper{
width: 300px;
height: 300px;
line-height: 300px;
position: relative
}
.box{
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%)
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box"></div>
</div>
</body>
</html>
'디지털 컨버전스 > HTML&CSS' 카테고리의 다른 글
| [CSS] 예제 - 사이드바 트리거 (0) | 2020.04.07 |
|---|---|
| [CSS] 예제 (z-index , transform) - 위로 오는 사진 (0) | 2020.04.07 |
| [CSS] Transform (0) | 2020.04.07 |
| [CSS] 예제 (z-index , position) - 겹친사진, 사이드바 (0) | 2020.04.07 |
| [CSS] Positioning - position: fixed (0) | 2020.04.07 |