모든 화면 해상도에서 backround 중간 이미지의 가운데 div

Question

이 코드를 사용하여 브라우저의 전체 수직 높이를 차지하는 배경 이미지를 표시합니다.

<div id="outer"></div> 

내가 모두 수직 및 수평으로 모든 화면 해상도에 대한 이미지의 중간에 중심입니다 내부 사업부를 배치 할 찾고 있어요

#outer { 
    background-image: url(https://www.mydomain./image.jpg); 
    height: 100vh; 
    background-size: cover; 
    background-repeat: no-repeat; 
} 

CSS.

지금까지 내가 시도한 모든 작업에 실패했습니다. 이것은 대부분의 브라우저에서 지원해야합니다.

Answer 1

는 대한 height 및 width 설정내부 div을 입력 한 다음 margin: auto을 사용하여 가로로 가운데에 넣고 padding: calc(50vh - 10px) 0을 세로 가운데에 맞 춥니 다. 10px은 내면의 높이의 절반이어야합니다 div. 이 시도 :

#outer { 
 
    background-image: url('http://placehold.it/100x100'); 
 
    height: 100vh; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
} 
 
#inner { 
 
    color: red; 
 
    width: 100px; 
 
    height: 20px; 
 
    margin: auto; 
 
    text-align: center; 
 
    padding: calc(50vh - 10px) 0; 
 
}

<div id="outer"> 
 
    <div id="inner">test</div> 
 
</div>

Answer 2

옵션 1 : 위치 절대 및 번역 50 % 방법

body { 
 
    margin: 0; padding: 0; 
 
} 
 
.outer { 
 
    position: relative; 
 
    background-image:url(http://i.imgur.com/55PnNyJ.jpg); 
 
    height:100vh; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
} 
 
.centered { 
 
    position: absolute; 
 
    top: 50%; left: 50%; 
 
    transform: translateY(-50%) translateX(-50%); 
 
    display: inline-block; 
 
    color: hsla(0, 0%, 100%, 0.4); 
 
    background-color: hsla(0, 0%, 0%, 0.4); 
 
}

<div class="outer"> 
 
    <div class="centered">I'm (almost) On A Boat</div> 
 
</div>

바이올린

https://jsfiddle.net/Hastig/j7rgjspt/2/

---

,363,210

옵션 2 : 인 flexbox 정당화 콘텐츠/정렬 - 항목을 중심

body { 
 
    margin: 0; padding: 0; 
 
} 
 
.outer { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    background-image:url(http://i.imgur.com/55PnNyJ.jpg); 
 
    height:100vh; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
} 
 
.centered { 
 
    display: inline-flex; 
 
    text-align: center; 
 
    color: hsla(0, 0%, 100%, 0.4); 
 
    background-color: hsla(0, 0%, 0%, 0.4); 
 
}

<div class="outer"> 
 
    <div class="centered">I'm (almost) On A Boat</div> 
 
</div>

바이올린

https://jsfiddle.net/Hastig/j7rgjspt/1/