브라우저 간 수직 센터링에 대한 궁극적 인 해결책은 무엇입니까?

짧고 힘들지 만 여러 가지 방법으로 요소를 얻으려고 시도했습니다. 정보 텍스트, 절대 중심 (H/V) 없이 div, Javascript, jQuery 또는 무엇이든지 사용.브라우저 간 수직 센터링에 대한 궁극적 인 해결책은 무엇입니까?

이 문제는 작동하지 않으며 여러 가지 방법이 있지만 브라우저 간 호환을 위해 머리를 잃어 가고 있습니다. 그리고 그렇게 간단해야합니다.

예를 들어, FF21은 논리적 인 이유로 50 %의 여백 - 위쪽을 100 %로 해석합니다. (그러나 모바일 장치는 그렇지 않습니다).

body { 
    margin: 50% 0 0; 
    padding: 0; 
    border: 0; 
    display: block; 
    vertical-align: middle; /* removing this made no real difference at all */ 
    font-family: Helvetica, Arial, MS Sans Serif; 
    font-size: 11pt; 
    text-align:center; 
    background-color: rgb(10, 50, 100); 
    color: #ddd; 
}

참고 :

내가 <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" />

관련 CSS를 사용하고

파이어 폭스에서 예상되는 수직 중심은 25 %의 마진을 정상으로 설정 (모바일 브라우저에서 잘못 보입니다.). 피하기 스크립트와 미리 계산 부정적인 여백의 어떤 형태로 시도
HTML5를 사용하여
. 브라우저는 요청한대로 제대로 센터에 있어야합니다.

JS-바이올린 : http://jsfiddle.net/sfaVg/

출처

2013-06-05 Chris S.

** ** 높이를 100 %로 설정하려고 할 때 ** ** 수직 정렬로 ** 놀아 보았습니다. ** ** 마진 대신 패딩을 시도했습니다. 및 더 많은 시나리오. ** ** 모든 ** 일반 브라우저에서 ** 평등 ** ** 일하는 ** 쉬운 솔루션 **을 찾지 못했습니다. –

포함 요소없이 * 무언가를 중심에 두려고합니다 *? 왜 이걸 필요로했을까요? – xec

내용 (텍스트)이 있습니다. 그것은 반드시 신체 일 필요는 없지만, 나는 종종 만족스럽지 않은 문제에 빠지게됩니다. 뭔가 집중시키는 것이 "놀기 arround"를 많이 필요로하고, 일부 브라우저/스크린/OS 환경에서 여전히 오싹 해 보입니다. 예를 들어 50 %는 모든 브라우저에서 50 %가되어야하며 파이어 폭스에서는 100 %가 아니라 50 %이어야합니다. 트릭 조랑말이기 때문에 무지개와 20 % 쿨러로 생각됩니다. 그래 ... 내 말이 중요해. 죄송합니다, 롤. –

텍스트를 포함하는 요소없이, 당신은 당신이 원하는 것처럼 상사를 배치 할 수있을 것입니다 의심한다. 적절한 마크 업을 작성한 후에는 (예를 들어, <p>에 문단을 넣으십시오.) 다음 CSS와 함께 꽤 가능합니다. 또한

p { 
    display: table-cell; 
    vertical-align: middle; 
    text-align:center; 
}

(귀하의 경우 body)를 확인 컨테이너를 만들 디스플레이를 가져옵니다 테이블; 100 % 너비/높이

데모 또한 http://jsfiddle.net/sfaVg/3/

AT는, 보너스 대안적인 방법을 사용하면 어떤 크기를 알고있는 경우에 대해 http://zoffix.com/new/absolute-center-random-width-height.html

세번째 용액에서 찾을 수있다 (두 개의 용기가 필요) 다시 센터링 : http://reisio.com/examples/deadcenter/

출처

2013-06-05 08:31:50 xec

첫 번째 솔루션을 정확하게 내가 뭘 찾고있는 것 같다, 두 번째는 꽤 interestring 너무 보인다 . 궁금한 점은 왜 디스플레이 유형이 두 가지 솔루션에서'테이블 '이어야하는지에 대한 것이지만, 나는 그걸로 인생을 살아갈 수 있다고 생각합니다. 세 번째 해결책은 제가 한 일의 정확한 예입니다 ** ** **. 고마워요. –

@ChrisS .: '테이블 셀'로 렌더링해야하는 이유는 '세로 맞춤'이 표 셀에서 다르게 동작하기 때문입니다 (인라인 텍스트의 가운데에 배치하는 대신 내용을 세로로 가운데에 맞 춥니 다). http : //phrogz.net/css/vertical-align/을 참조하십시오. – xec

브라우저 간 수직 센터링에 대한 궁극적 인 해결책은 무엇입니까?

답변

관련 문제