센터 로고 및 4 개의 이미지를 페이지에 채우시겠습니까?

Question

내 로고가 네 개의 이미지 가운데에 오게하고 싶습니다. 어떻게해야합니까? 4 개의 이미지가 창을 채우고 로고가 가운데에 배치되기를 바랍니다. 또한 이미지를 스트레칭하고 싶지 않지만 필요

.header { 
 
    background-color: black; 
 
    border-bottom: 1px solid #466995; 
 
    overflow-y: auto; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    z-index: 10; 
 
} 
 

 
ul { 
 
    margin: 30px auto; 
 
    text-align: center; 
 
} 
 

 
li { 
 
    color: #FFF; 
 
    display: inline-block; 
 
    font-family: 'Oswald', sans-serif; 
 
    font-size: 16px; 
 
    text-align: left; 
 
    font-weight: 300; 
 
    text-transform: uppercase; 
 
    padding: 0 100px; 
 
} 
 

 
li:hover { 
 
    color: #DBE9EE; 
 
} 
 

 

 
body { 
 
    margin: 0; 
 

 
} 
 

 
img { 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 

 
#container { 
 
    max-width: 100%; 
 
    z-index: -100; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.containermenu { 
 

 
} 
 

 
.containermenu img{ 
 
    width: 50%; 
 
    height: 50%; 
 
    float: left; 
 
} 
 

 
#logo { 
 
    width: 20%; 
 
    margin: 0 auto; 
 
    position: absolute; 
 
    z-index: 20; 
 
    left: 40%; 
 
    right: 40%; 
 

 

 

 
} 
 

 
#process img { 
 
    width: 100%; 
 
} 
 

 
#process { 
 
    width: 100%; 
 
}

<div id="container"> 
 
    <div id="logo"><a href="index.html"><img src="http://oi68.tinypic.com/2njh9id.jpg"></a></div> 
 
    <div class="containermenu"><a href="packaging.html"><img src="http://oi67.tinypic.com/vgmv80.jpg"></a></div> 
 
    <div class="containermenu"><a href="photography.html"><img src="http://oi67.tinypic.com/vgmv80.jpg"></a></div> 
 
    <div class="containermenu"><a href="illustration.html"><img src="http://oi67.tinypic.com/vgmv80.jpg"></a></div> 
 
    <div class="containermenu"><a href="about.html"><img src="http://oi67.tinypic.com/vgmv80.jpg"></a></div> 
 
</div>

Codepen link

Answer 1

될 경우 다음과 같은 CSS를 사용하여 페이지에 완벽하게 항목을 중심에 크기를 조정 고려할 것

position: absolute; 
left: 50%; 
top: 50%; 
transform: translateX(-50%) translateY(-50%); 

편집 : Updated Codepen

Answer 2

사용 transform 의미있는 질문 헤더를 만드십시오

.header { 
 
    background-color: black; 
 
    border-bottom: 1px solid #466995; 
 
    overflow-y: auto; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    z-index: 10; 
 
} 
 
ul { 
 
    margin: 30px auto; 
 
    text-align: center; 
 
} 
 
li { 
 
    color: #FFF; 
 
    display: inline-block; 
 
    font-family: 'Oswald', sans-serif; 
 
    font-size: 16px; 
 
    text-align: left; 
 
    font-weight: 300; 
 
    text-transform: uppercase; 
 
    padding: 0 100px; 
 
} 
 
li:hover { 
 
    color: #DBE9EE; 
 
} 
 
body { 
 
    margin: 0; 
 
} 
 
img { 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 
#container { 
 
    max-width: 100%; 
 
    z-index: -100; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.containermenu {} .containermenu img { 
 
    width: 50%; 
 
    height: 50%; 
 
    float: left; 
 
} 
 
#logo { 
 
    width: 20%; 
 
    position: absolute; /*fixed*/ 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 
#process img { 
 
    width: 100%; 
 
} 
 
#process { 
 
    width: 100%; 
 
}

<div id="container"> 
 
    <div id="logo"> 
 
    <a href="index.html"> 
 
     <img src="http://oi68.tinypic.com/2njh9id.jpg"> 
 
    </a> 
 
    </div> 
 
    <div class="containermenu"> 
 
    <a href="packaging.html"> 
 
     <img src="http://oi67.tinypic.com/vgmv80.jpg"> 
 
    </a> 
 
    </div> 
 
    <div class="containermenu"> 
 
    <a href="photography.html"> 
 
     <img src="http://oi67.tinypic.com/vgmv80.jpg"> 
 
    </a> 
 
    </div> 
 
    <div class="containermenu"> 
 
    <a href="illustration.html"> 
 
     <img src="http://oi67.tinypic.com/vgmv80.jpg"> 
 
    </a> 
 
    </div> 
 
    <div class="containermenu"> 
 
    <a href="about.html"> 
 
     <img src="http://oi67.tinypic.com/vgmv80.jpg"> 
 
    </a> 
 
    </div> 
 
</div>