How to position an element dead center in fluid layout with variable height?
Need to position box-inside div dead center to the wrapper div, where the wrapper div's height depends on the sidebar div height. The box-inside div was positioned absolute in relative to the wrapper div, and sets a variable width and height which is respective to the images and content inside it.
This can be accomplish by giving width and height to the box-inside div, but have to do with variable width and height.(the box-inside div have to be in same dimension as the img with padding)
The jsFiddle code here
This is the HTML code:
<body>
<div class="wrapper">
<div class="sidebar"></div>
<div class="inside-box">
<img src="badge.gif" />
</div>
</div>
</body>
The CSS
* {
margin: 0;
}
html,body {
height: 100%;
}
body {
background: white;
display: block;
font-family: Tahoma, Geneva, sans-serif;
margin: 0;
padding: 0;
}
.wrapper {
position:relative;
height: auto;
width:70%;
margin: 0 auto ;
background:green;
}
.sidebar {
height: 500px;
width:30%;
background: red;
clear:both;
}
.inside-box {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background:yellow;
min-width:275px; min-height:183px;
padding:10px;
}
Currently 
Expected Output 
You need to add some extra wrapper elements as follows:
<div class="wrapper">
<div class="sidebar"></div>
<div class="inside-box">
<div class="inside-wrap">
<div class="inside-cell">
<div class="content-wrapper">
<img src="http://s21.postimg.org/lgwltcynr/image.jpg" />
<p>Tyger Tyger burning bright...</p>
</div>
</div>
</div>
</div>
</div>
and apply the following CSS:
.inside-box {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.inside-wrap {
display: table;
width: 100%;
height: 100%;
}
.inside-cell {
display: table-cell;
width: 100%;
height: 100%;
text-align: center;
vertical-align: middle;
}
.content-wrapper {
background-color: yellow;
padding: 10px;
display: inline-block;
}
The solution depends on using CSS table-cells, which has pretty good support except for older IE browsers.
The .inside-box wrapper is used to recognize the dimensions of the parent block that depend on some of the child elements such as the sidebar.
The .inside-wrap uses display: table to capture the 100% height and width.
The .inside-cell uses display: table-cell and allows the vertical and horizontal alignment to work.
Finally, you need a .content-wrapper to paint the yellow background as you want with some padding.
.content-wrapper is a self-contained unit so you can place floated elements in it without breaking anything.
See demo at: http://jsfiddle.net/audetwebdesign/6XSqD/
Just try with this jsfiddle that is according to expected output & have very few changes to your code . Have a look on it -
jsfiddle