html css 화면 가운데 세로 중앙 위치 정렬

화면의 가로 세로 가운데에 글자를 위치시키는 소스입니다.

화면의 크기가 변경이 되어도 가운데를 벗어나지 않습니다.

 

<div class="outer">
  <div class="inner">
    센타
  </div>
</div>

<style>
.outer {
  position: relative;
  width: 100%;
  height: 100%;
  font-size: 25px;
  color:red;
  border: 2px solid green;
  margin:0;
}

.inner {
  position: absolute;
  transform: translate(-50%,-50%);
  left: 50%;
  top: 50%;
}

</style>

 

 

소스 참조

 

html css 소스

 

결과 참조

 

결과화면