How to set div between two div - css

Question

I need to make something like this , how can I make the square on the middle between this two? Here is the CSS and Photo
My Css
#up{
width:100%;
height:30%;
}
#down{
width:100%;
height:70%;
}
#square{
width:40px;
height:40px;
}
Can I setting the square without counting the percentage of the location of the middle line? (because I want to add all something like this into all sessions of the web , and the height of the session will responsive by the text length

Answer 1

You need to use position relative to outer div and position relative to inner div
here is the link how can you do it
fiddle
.one,
.two,
.three {
width: 100%;
height: 50px;
}
.one {
background: yellow;
position: relative;
}
.two {
background: green;
}
.three {
background: red;
}
.square {
position: absolute;
bottom: -10px;
right: 30px;
height: 20px;
width: 20px;
background: white;
}
<div class="one">
<div class="square">
</div>
</div>
<div class="two">
</div>
<div class="three">
</div>

Answer 2

You can have a <div> square as:
<div id="div1"></div>
in CSS:
#div1{
border: 1px red;
height: /*enter the height */
width: /* enter the width */
position: relative;
left: /*enter the distance */
right: /*enter the distance */
top: /*enter the distance */
bottom: /*enter the distance */
z-index: 100 /* make sure other div's have z index lesser than this div's */
}

Answer 3

Put the square INTO the second div, give it a position: absolute and a top: -20px (and left: Xpx- i.e. whatever you need/want).

Answer 4

You can easily do this with position:absolute to your small box div.
Here is the solution that can help you
body,
html {
height: 100%;
margin:0px;
}
#up {
width: 100%;
height: 30%;
background: red;
}
#down {
width: 100%;
height: 70%;
background: blue;
}
#square {
width: 40px;
height: 40px;
background: green;
position: absolute;
top: calc(30% - 20px);
margin: 0px auto;
left: 0px;
right: 0px;
z-index: 1;
}
<div id="up"></div>
<div id="down"></div>
<div id="square"></div>