How to center child divs along each side of a parent div - html

Question

I want to center 4 small, square child divs along each edge of a square parent div. My current solution depends on hacked-together absolute positioning. http://jsfiddle.net/Lrc4h/
HTML:
<div class="tile">
<div class="tile_inner"></div>
<div class="exit_left"></div>
<div class="exit_right"></div>
<div class="exit_up"></div>
<div class="exit_down"></div>
</div>
CSS:
.tile {
float: left;
width: 180px;
height: 180px;
background-color: gray;
border: 2px solid black;
}
.tile_inner {
width: 120px;
height: 120px;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid white;
}
.exit_left {
position: absolute;
top: 90px;
width: 20px;
height: 20px;
border: 3px solid pink;
}
.exit_right {
position: absolute;
left: 165px;
top: 90px;
width: 20px;
height: 20px;
border: 3px solid red;
}
.exit_up {
position: absolute;
left:90px;
top:10px;
width: 20px;
height: 20px;
border: 3px solid blue;
}
.exit_down {
position: absolute;
left:90px;
top:165px;
width: 20px;
height: 20px;
border: 3px solid green;
}
How can I get each of the exit directions centred along the edge of each axis?

Answer 1

Here is an updated snippet: http://jsfiddle.net/Lrc4h/3/
First of all you need to know that when you're using position: absolute the element will position with absolute coordinates based on the first parent that is position: absolute or position: relative falling back to the document if there is none.
Secondly it's important, when dealing with borders like in your example, to understand the box model and how nasty things get when borders cross the borders ;-). It's a common practice to use box-sizing: border-box to make things a bit easier and to mix relative and absolute units nicely. I've included a box model initialization how I prefer it on the top of the example I've posted.
Combining all this together you can start use relative units (percentage) in your absolute positioning. The example I've posted is still using absolute positions but relative to the .tile element. You should always make your absolute positions relative to a parent. Using left: 50% centers the start of your element to the center of your parents width. However, as your exit element also has a width this needs to be compensated by half of it's width. That's why there is a margin-left: -15px. You could also use the calc function if browser support is IE9+. This would look like this: left: calc(50% - 15px).
As you can see the example still has absolute positions and this problem is easy to solve with absolute positioning. You still have to "hard code" a few values, but they are all relative to the parent and you can easily change your .tile dimensions without changing the child elements.
Cheers
Gion

Answer 2

.tile_inner {
width: 120px;
height: 120px;
position: relative;
top: 50%;
left: 50%;
margin: -60px 0 0 -60px;
border: 1px solid white;
}

Answer 3

You just need to adjust the margin
Demo
.tile_inner{
margin: -60px 0 0 -60px;
}

Answer 4

Maybe as not as clean as it can get, but you can use the calc function to use percentages in conjunction with pixels (based on the width & height of the child divs. For example (I'm including only the changes to the CSS code:
.tile {
position: relative;
}
.exit_left {
top: calc(50% - 13px);
}
.exit_right {
left: calc(100% - 26px);
top: calc(50% - 13px);
}
.exit_up {
left: calc(50% - 13px);
}
.exit_down {
left: calc(50% - 13px);
top: calc(100% - 26px);
}
In that way, even when you change the parent div's dimensions, the child divs will remail in place.
Demo: http://jsfiddle.net/xPP32/

Answer 5

Here's slightly optimized version that relies on pseudo-elements and relative units of measurement (%). Scaling this one is a breeze. All you need to do is change the height and width on the .tile and the rest is taken care of. Here's the original square: http://jsfiddle.net/MGse6/. And, here's a square scaled up: http://jsfiddle.net/k9dxW/.
HTML:
<div class="tile">
<div></div>
</div>
CSS:
*, :before, :after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 10px;
}
.tile {
width: 180px;
height: 180px;
background-color: gray;
border: 2px solid black;
position: relative;
}
.tile > div {
width: 65%;
height: 65%;
border: 1px solid #fff;
margin: 17.5% auto 0;
}
.tile:before,
.tile:after,
.tile > div:before,
.tile > div:after {
content: "";
position: absolute;
width: 16%;
height: 16%;
border: 3px solid;
}
.tile:before {
top: 0;
left: 50%;
margin-left: -8%;
border-color: blue;
}
.tile:after {
top: 50%;
right: 0;
margin-top: -8%;
border-color: red;
}
.tile > div:before {
bottom: 0;
left: 50%;
margin-left: -8%;
border-color: green;
}
.tile > div:after {
top: 50%;
left: 0;
margin-top: -8%;
border-color: pink;
}
And, here's another solution where elements are arranged using flow: http://jsfiddle.net/xep9M/.
HTML:
<div class="tile">
<!--
It's very important
to have the divs stack
next to each other
-->
<div></div><div></div><div></div><div></div><div></div>
</div>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 10px;
}
.tile {
width: 180px;
height: 180px;
background-color: gray;
border: 2px solid black;
box-sizing: content-box;
}
.tile > div {
width: 16%;
height: 16%;
display: inline-block;
border: 3px solid;
}
.tile > div:first-of-type,
.tile > div:last-of-type {
display: block;
margin: 0 auto;
}
.tile > div:first-of-type {
margin-bottom: 1.5%;
border-color: blue;
}
.tile > div:last-of-type {
margin-top: 1.5%;
border-color: green;
}
.tile > div:nth-of-type(3) {
height: 65%;
width: 65%;
border: 1px solid #fff;
}
.tile > div:nth-of-type(n + 2) {
vertical-align: middle;
}
.tile > div:nth-of-type(2) {
margin-right: 1.5%;
border-color: pink;
}
.tile > div:nth-of-type(4) {
margin-left: 1.5%;
border-color: red;
}