심플하게
<div id="bg" style="width: 20%;height: 20%;background-color: yellow;">
<div id="item" style="width: 50%;height: 50%;background-color: red; margin: auto;text-align: center;"> <p>item</p> </div></div>
자식 div(item) 의 width 값과 margin:auto 가 있으면 부모 div(bg) width의 가운데에 위치함.
vertical 중앙으로 자식 div를 위치하고 싶을때 아래와 같이
<div id="bg" style="width: 200px;height: 200px;background-color: yellow;
display: table-cell;vertical-align: middle;">
<div id="item" style="width: 100px;height: 100px;background-color: red;
margin: auto;text-align: center;display: block;">
<p>item</p>
</div>
</div>
-----------------------------------------
html ==============================
<div id="container">
<div id="block">
<div class="menu-icon-style menu-text-style background-color-red no-margin-left" >
360vr vod
</div>
<div class="menu-icon-style menu-text-style">
360 image
</div>
</div>
css ================================
#container {
width:600px;
height:300px;
background-color:#191970;
text-align:center;
vertical-align:middle;
display:table-cell;
}
#block {
background-color:rgba(255, 215, 0, 0.54);;
display:inline-block;
}
.menu-icon-style {
width: 200px;height: 200px;
background-color: green;float: left;
border-radius: 20px;border: 5px solid yellow;
text-align:middle;line-height:200px;
margin-left: 50px;"
}
.menu-text-style{
font-size: 27px;color: white;
font-family: inherit;font-weight: bold;
}
.background-color-red {
background-color: red;
}
.no-margin-left {
margin-left:0px;
}
