如果连续少于3，则动态地将引导程序更改为中心

Currently I have three col-md-4 columns displaying an image in each. If a user only has say 1 or 2 images uploaded it will float the content left as normal but leave the third with wasted space.

Is it possible with CSS to centre the 1-2 columns until a 3rd has been added?

    <div class="container>

     <div class="row">

        <div class="col-md-4 image-1">
         <img>
        </div>

        <div class="col-md-4 image-2">
         <img>
        </div>

        <div class="col-md-4 image-3">
         <img>
        </div>

     </div>

    </div>

I think you should not mix left-aligned items (when 3 or more) with center aligned items. What happens when a group of 2 items follows a group of 4 or 5?

If you want them all centered, just add a custom class (.centerRows in my case) to the container and use the CSS below:

.centerRows>.row {
  text-align: center;
}
.centerRows>.row>[class^="col-"] {
  text-align: initial;
  float: none;
  margin: 0 auto;
  display: inline-block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container centerRows">
  <div class="row">
    <div class="col-md-4 image-1">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-2">
      <img src="http://placehold.it/350x150">
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 image-1">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-2">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-3">
      <img src="http://placehold.it/350x150">
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 image-1">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-1">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-2">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-3">
      <img src="http://placehold.it/350x150">
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 image-1">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-2">
      <img src="http://placehold.it/350x150">
    </div>
  </div>
</div>

If you only want to center the rows with 2 or less children, add a custom class to the rows you want centered, after counting their children via js. Proof of concept:

$('.container>.row').each(function(){
  if($(this).children().size() < 3) $(this).addClass('centerMe');
})

.centerMe {
  text-align: center;
}
.centerMe>[class^="col-"] {
  text-align: initial;
  float: none;
  margin: 0 auto;
  display: inline-block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-4 image-1">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-2">
      <img src="http://placehold.it/350x150">
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 image-1">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-2">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-3">
      <img src="http://placehold.it/350x150">
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 image-1">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-1">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-2">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-3">
      <img src="http://placehold.it/350x150">
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 image-1">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-md-4 image-2">
      <img src="http://placehold.it/350x150">
    </div>
  </div>
</div>

</div>

IMHO you can't do this with css. It can be done using JS. Something like this:

if($('.image-3').length === 0){
    $('.row').find('div').RemoveClass('col-md-4');
    $('.row').find('div').AddClass('col-md-6');
}

But if you'll add more statement to the algorithm, i mean "if it will be only one div, or only 4(with one on next row)" you'll have to get more complicated code.