How can I centralize 5 divs without using margin-left?

Question

I'm trying to get 5 divs aligned inside a div, like this:

Is there any way to do this without using margin-left?

I mean.. In case I want to eliminate one of this middle divs and they still be aligned? For example.. If I remove div4, the others will be centered automatically. Like this:

I found a solution like this:

#parent {
  width: 615px;
  border: solid 1px #aaa;
  text-align: center;
  font-size: 20px;
  letter-spacing: 35px;
  white-space: nowrap;
  line-height: 12px;
  overflow: hidden;
}
.child {
  width: 100px;
  weight: 100px;
  border: solid 1px #ccc;
  display: inline-block;
  vertical-align: middle;
}

But the problem is: The first div and the last one must be like float left and float right... And this solution centers every thing resulting something like this:

Answer 1

The flexbox might be the answer you're looking for.

#container {
  display: flex;
  justify-content: space-between;
  border: 1px solid black;
  background: #ccc;
}
#container>div {
  width: 100px;
  border: 1px solid black;
  background: #fff;
  height: 100px;
}

<div id="container">
  <div>box 1</div>
  <div>box 2</div>
  <div>box 3</div>
  <div>box 4</div>
  <div>box 5</div>
</div>

If you want to maximise browser compatibility, be sure to also add the correct vendor prefixes:

#container {
  display: -moz-flex;
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  /* … */
}

Answer 2

maybe so

text-align: justify - this feature works with text, as well as our line-block (display: inline-block) points, in fact, and are inseparable words in a row, this behavior is quite natural.

Incidentally, it is worth considering that the text-align: justify inherited property, so text-align: left at the next descendants - a necessary measure. In this way, we would return as the alignment of the content of our blocks in the former state.

This algorithm does not apply to the last line, and works with all lines except her.Therefore, using :after I added to the end of another element, pacifier, and stretched it to 100% of the width, thus forcing him to stretch out on the very last line in the list.

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

div {    
    text-align: justify; 
    font-size: 0;
}
div:after {
    width: 100%;
    height: 0;
    visibility: hidden;
    overflow: hidden;
    content:'';
    display: inline-block;
}
div > div {
    background: #E76D13;
    width: 100px;
    height: 100px;
    display: inline-block;
    text-align: left;
    border: 1px solid #000;    
    line-height: normal;
    font-size: 14px;
    vertical-align: top;    
}

<div>
    <div>1</div>
   <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>