1. 한줄 가운데 맞춤. (line의 height상에서의 가운데 맞춤임)
<body>
<div class="div">
<div class="container">
<div class="item">한줄 작성
</div>
</div>
</div>
</body>.div{
line-height: 200px;
background-color: coral;
}
----------------------------
height % 지정해서 margin으로 가운데 맞춤.(잘 안쓸듯?)
.items{
background-color: yellow;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 20%;
} 
2. container, items 화면 가운데 맞춤(여러 버전!)
<body>
<div class="div">
<div class="container">
<div class="item">한줄 작성<br>한줄 작성<br>한줄 작성
</div>
</div>
</div>
</body>.container{
↓ Container는 이동안하고 그대로 있음
background-color: coral;
width: 300px ;
height: 300px;
}
.items{
↓ container안 items div 설정
background-color: yellow;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
----------------------------
.container{
background-color: coral;
width: 300px ;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.items{
/* margin-top: -50px; */
background-color: yellow;
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
----------------------------
.container{
background-color: coral;
width: 300px ;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.items{
/* margin-top: -50px; */
background-color: yellow;
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
display: flex;
justify-content: center;
align-items: center;
}
----------------------------
위아래 fixed 잡고 가운데 contents 넣기
<div class="container">
<div class="topdiv"></div>
<div class="items">
<img src="images/namu.jpg" >
hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hahahahahahaha<br>hihihihihihihi<br>hehehehehehehe
<div class="bottom"></div>
</div>
</div> .bottom{
position: fixed;
bottom: 0;
width: 100%;
height: 300px;
background-color: grey;
}
.topdiv{
position: fixed;
top: 0;
z-index: 999999999999;
width: 100%;
height: 300px;
background-color: blue;
}
.items{
background-color: yellow;
position: relative;
display: block;
top: 50%;
margin: 300px auto;
} 
개발꿈나무