센터에서의 반응 위치 지정

Question

일부 내용이있는 전체 너비 배경 이미지가 있습니다. 끝으로 내 버튼을 (수직 및 수평으로) 중앙에 배치하고 싶지만 position:absolute을 사용하면 그 버튼이 작동하지 않습니다. JSFiddle에서 확인할 수 있습니다.

내 CSS

.buttons{ 
    position:relative; 
} 

.buttons .button-pos{ 
    width:100%; 
    position:absolute; 
    margin:auto; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
} 

에서 일부 코드 라인이 그리고 내가 원하는 그 작은 계획이있다.

Answer 1

나는 혼자서 약간의 해결책을 만들고 지금은 아주 잘 작동한다. 나는 헤더에있는 모든 내용을 중심에두기로 결정했다. 화면 크기 만 몇 가지 작은 변화와 그것을 잘 작동합니다 :) 누군가가 몇 가지 더 나은 솔루션을 가지고있는 경우

#welcome-header .welcome-content{ 
    width: 80%; 
    height: 400px; 
    position: absolute; 
    margin: auto; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
} 

.buttons{ 
    margin-top: 40px; 
} 

는, 거기에 쓰기 :

가 @Johannes과 함께

Answer 2

1) 귀하의 .buttons 사업부가 그렇지 않으면 수직 중심으로 가능성이 없기 때문에 먼저 그것의 높이를 정의 할 필요가, 높이가없는 (I)는 200 픽셀 바이올린에 그것을했다.

2.

), .buttons 내 .button-pos을 중심으로 여기에

.button-pos { 
    width: 100%; 
    position:absolute; 
    top:50%; 
    left:50%; 
    transform: translate(-50%, -50%); 
} 

이 바이올린의 사용이 시도 https://jsfiddle.net/Luo1k7Lt/1/

Answer 3

:

.buttons .button-pos { display: inline-block; zoom: 1; }

을 간단한 IE가 해킹 display*: inline;을 추가하는 것입니다 그 CSS 규칙에