Horizontal centering of div within display:table row - css

Question

I have a layout composed of divs displaying as table, 3 table rows, and up to 5 table cells per row. My problem is twlofold:
1) I can't figure out how to center the table cells within the rows if there are less than five cells in the table., and
2) I can't figure out how to keep the integrity of the shapes when there are less than 5 in a row.
The number of cells in a row will be variable (between 3 and 5), and I have to use divs -- I can't use real tables.
Here is a codepen: http://codepen.io/Jaemaz/full/aCboe
Here is the source:
HTML:
<div class="focus-container">
<div class="focus-row">
<div class="focus-element circle">
<span class="ng-scope">
Option A
</span>
</div>
<div class="focus-element circle">
<span class="ng-scope">
Option B
</span>
</div>
<div class="focus-element circle">
<span class="ng-scope">
Option C
</span>
</div>
<div class="focus-element circle">
<span class="ng-scope">
Option D
</span>
</div>
<div class="focus-element circle">
<span class="ng-scope">
Option E
</span>
</div>
</div>
<div class="focus-row">
<div class="focus-element circle" ng-class="{unknown: unknown, square: square, circle: circle, selected: selected, shouldHaveBeenSelected: shouldHaveBeenSelected, shouldNotHaveBeenSelected: shouldNotHaveBeenSelected}" ng-click="click()" ng-transclude="" focuschoice="" identifier="F" enabled="true">
<span class="ng-scope">
Option F
</span>
</div>
</div>
</div>
CSS:
.focus-container {
width: 560px;
height: auto;
display: table;
background-color: #000;
border-spacing: 15px;
table-layout: fixed;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.focus-row {
width: 100%;
height: 100%;
display: table-row;
}
.focus-element {
width: 90px;
height: 90px;
display: table-cell;
color: #fff;
background: #808080;
border: 2px solid #BFBFBF;
vertical-align: middle;
text-align: center;
font-family: "Ubuntu", Arial, Helvetica, sans-serif;
font-size: 14px;
text-shadow: 0px 2px 1px rgba(0, 0, 0, 1);
max-width: 94px;
}
.focus-element.circle {
-moz-border-radius: 94px;
-webkit-border-radius: 94px;
border-radius: 94px;
}
Screen Shot:

Answer 1

Tables won't do that, but tables in table will. 1) Use single-cell rows in outer table and a new table within each cell, and center the inner table within the row. 2) You might use fixed (or some relative) width and height on each cell within inner tables.
ADDED:
This will work for display:table as well as old-school table.
Outermost table should only have one cell in each row, and in that cell place the inner table.

Answer 2

Building on #Jojje 's suggestion, the answer lies in creating an extra "inner" level (display:table) within the div structure. Solution is on CodePen here: http://codepen.io/Jaemaz/pen/spbKf
In case Codepen goes away, here is sample HTML and CSS:
HTML
<div class="focus-container">
<div class="focus-row">
<div class="inner">
<div class="focus-element circle">
<span>ahem</span>
</div>
</div>
</div>
<div class="focus-row">
<div class="inner">
<div class="focus-element circle">
<span>hello</span>
</div>
<div class="focus-element circle">
<span>there</span>
</div>
</div>
</div>
<div class="focus-row">
<div class="inner">
<div class="focus-element circle">
<span>what</span>
</div>
<div class="focus-element circle">
<span class="content">is</span>
</div>
<div class="focus-element circle">
<span>happening</span>
</div>
<div class="focus-element circle">
<span>happening</span>
</div>
<div class="focus-element circle">
<span>happening</span>
</div>
</div>
</div>
</div>
CSS
.focus-container {
width: 560px;
background-color: #000;
padding: 5px;
}
.focus-container .focus-row {
height: 110px;
background-color: #000
}
.focus-container .focus-row .inner {
display: table;
margin: 0 auto;
height: 110px;
}
.focus-container .focus-row .inner .focus-element {
float: left;
text-align: center;
margin: 0 auto;
width: 94px;
height: 94px;
background-color: #009900;
}
.focus-container .focus-row .inner .focus-element span {
margin-top: 40px;
display: block;
}
.focus-container .focus-row .inner .circle {
-moz-border-radius: 94px;
-webkit-border-radius: 94px;
border-radius: 94px;
margin: 8px;