페이지 중앙에 텍스트를 가운데에 배치하는 방법

Question

회전 된 텍스트를 페이지 가운데에서 고정하는 방법을 궁금하십니까?
여기는 jsfiddle입니다. CSS/html로만이 작업을 수행 할 수 있기를 바랍니다.

많은 감사합니다 :)

HTML 텍스트가 중앙에 있지처럼 당신이 h1 태그, 대부분의 브라우저를 사용하고 있기 때문에

h1 { 
    text-transform: uppercase; 
    white-space: nowrap; 
    text-align: center; 
    position: fixed; 
    left: 50%; 
    height: 100%; 
    width: 100%; 
} 
.rotate { 
    -webkit-transform-origin: 0 50%; 
    -moz-transform-origin: 0 50%; 
    -ms-transform-origin: 0 50%; 
    -o-transform-origin: 0 50%; 
    transform-origin: 0 50%; 
    -webkit-transform: rotate(-90deg) translate(-50%, 50%); 
    -moz-transform: rotate(-90deg) translate(-50%, 50%); 
    -ms-transform: rotate(-90deg) translate(-50%, 50%); 
    -o-transform: rotate(-90deg) translate(-50%, 50%); 
    transform: rotate(-90deg) translate(-50%, 50%); 
} 

Answer 1

나의 제안은 '좋은 똑똑한를 사용하는 것입니다 top, right, bottom, 1emheight 및 line-height의 추가로 margin: auto를 사용하여 left 트릭. 그래서 같이 :

h1 { 
    ... 

    /* new code */ 
    left:0; 
    right:0; 
    top:0; 
    bottom:0; 
    height: 1em; 
    line-height: 1em; 
    margin: auto; 
} 

.rotate { 
    /* new code */ 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    transform: rotate(-90deg); 
} 

데모 : 여기 과자 아래 http://jsfiddle.net/pqz0v71d/

Answer 2

이 보이는

<h1 class="main rotate">TEXT</h1> 

CSS 그것을위한 내장 스타일을 가지고 있습니다.

태그를 div으로 변경하면 텍스트의 가운데 맞춤이 올바르게 이루어집니다. JSFiddler here.

Answer 3

이 코드를 당신의 필요

h1 { 
    text-transform: uppercase; 
    white-space: nowrap; 
    text-align: center; 
    height: 100%; 
    width: 100%; 
    opacity: 1; 
    position:absolute; 
    left:50%; 
    top:50%; 
    margin:-302px 0 0 -34px; 
    -webkit-transition: opacity 300ms ease; 
    -moz-transition: opacity 300ms ease; 
    transition: opacity 300ms ease; 
    -webkit-transform: translateZ(0); 
    -moz-transform: translateZ(0); 
    -ms-transform: translateZ(0); 
    -o-transform: translateZ(0); 
    transform: translateZ(0); 
} 

http://jsfiddle.net/uubzrew3/

Answer 4

재미있는 훈련은, 내 방식 :

h1 { 
 
    margin: 0; 
 
    -webkit-transform-origin: 50%; 
 
    -moz-transform-origin: 50%; 
 
    -ms-transform-origin: 50%; 
 
    -o-transform-origin: 50%; 
 
    transform-origin: 50%; 
 
    -webkit-transform: translate(-50%, -50%) rotate(-90deg); 
 
    -moz-transform: translate(-50%, -50%) rotate(-90deg); 
 
    -ms-transform: translate(-50%, -50%) rotate(-90deg); 
 
    -o-transform: translate(-50%, -50%) rotate(-90deg); 
 
    transform: translate(-50%, -50%) rotate(-90deg); 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
} 
 
.centeredbox{ 
 
    position: fixed; 
 
    width: 10px; 
 
    height: 10px; 
 
    z-index: 15; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin: -5px 0 0 -5px; 
 
    background: red; 
 
}

<div class="centeredbox"></div> 
 
<h1 class="main rotate">TEXT</h1>