(CSS) 정렬 DIV 요소

Question

내가 하나의 div 요소의 중심을 시도하고 떠나 다른 사람과 같이 그에게서 왼쪽에 떠 만들려면 :이 코드 폭에

및 높이 설정 px하지만 내 안에 %. 그래서 나는 센터가 어디에 있는지 모른다. 따라서 다른 해상도로 변경해야합니다. 다른 div와 center에 넣고 싶지 않습니다. 왜냐하면 두 div를 모두 가운데에 배치하고 중심에 노란색 만 넣기를 원하기 때문입니다.

녹색과 동일한 높이로 빈 div를 추가하고 보이지 않게 만드는 다른 해결책이 있습니까? 중심이 된 div를 중심으로 허용 : 그것은 작동하지만 텍스트 정렬이

.container{ 
 
    background-color:#34495e; 
 
    width: 500px; 
 
    height: 200px; 
 
    padding: 10px; 
 
} 
 

 
.in-center{ 
 
    background-color:#f1c40f; 
 
    width: 40%; 
 
    height: 100%; 
 
    display: inline-block; 
 
} 
 

 
.to-left{ 
 
    background-color:#2ecc71; 
 
    width: 20%; 
 
    height: 100%; 
 
    display: inline-block; 
 
}

<div class="container"> 
 
     <div class="in-center"></div> 
 
     <div class="to-left"></div> 
 
</div>

Answer 1

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
.container { 
 
    background-color: #34495e; 
 
    width: 80%; 
 
    height: 200px; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
.in-center { 
 
    background-color: #f1c40f; 
 
    width: 40%; 
 
    height: 100%; 
 
    display: inline-block; 
 
} 
 
.to-left { 
 
    background-color: #2ecc71; 
 
    width: 20%; 
 
    height: 100%; 
 
    display: inline-block; 
 
    position: absolute; 
 
}

<div class="container"> 
 
    <div class="in-center"></div> 
 
    <div class="to-left"></div> 
 
</div>