title: JavaFX: How to center a TilePane but place the TilePane children from left-to-right?
body: <p>Like what the title suggest, I'm trying to center a <code>TilePane</code> in its parent container, but at the same time, I want the child nodes of the <code>TilePane</code> to be placed from left-to-right.</p>
  <pre><code>@Override
  public void start(final Stage primaryStage) throws Exception {
      final VBox root = new VBox();
      final Scene sc = new Scene(root);
      primaryStage.setScene(sc);
      
      final TilePane tp = new TilePane();
      root.getChildren().add(tp);
      
      tp.setPrefColumns(3);
      tp.setAlignment(Pos.TOP_LEFT);
      tp.setStyle(&quot;-fx-background-color: green;&quot;);
      root.setAlignment(Pos.CENTER);
      root.setFillWidth(true);
  
      Stream.iterate(0, i -&gt; i + 1).limit(5).forEach(i -&gt; {
          Region r = new Region();
          r.setPrefSize(200, 200);
          r.setStyle(&quot;-fx-background-color: red; -fx-border-color: blue; -fx-border-width: 1;&quot;);
  
          tp.getChildren().add(r);
      });
  
      primaryStage.show();
  }
  </code></pre>
  <p>This creates a window like this:</p>
  <p><a href="https://i.stack.imgur.com/K4CwA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/K4CwA.png" alt="On launch" /></a></p>
  <p>Increasing window width causes this:</p>
  <p><a href="https://i.stack.imgur.com/AlZpg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AlZpg.png" alt="Increased width" /></a></p>
  <p>Continuing to increase window height causes this:</p>
  <p><a href="https://i.stack.imgur.com/qGCIV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qGCIV.png" alt="Increased height" /></a></p>
  <p>Setting <code>root.setFillWidth(false)</code> causes:</p>
  <p><a href="https://i.stack.imgur.com/sOPRr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sOPRr.png" alt="Fill width = false" /></a></p>
  <p>What can I do to make sure that the whole <code>TilePane</code> remains centered while the <code>Region</code> child nodes continues to be placed from left on each row?</p>
  <h3>Update</h3>
  <p>To make it more clear, the <code>TilePane</code> should, during a resize, tries to fit in as many tiles (regions in this example) in all rows except the top row. In other words, there should not be any green space at the right side of the first row. Alternatively, the green space should be equal at both the left and right side. Additionally, the tiles must be placed from left to right. Setting <code>TilePane.setAlignment(Pos.CENTER)</code> would place any &quot;leftover&quot; tiles at the center of the last row, which is not acceptable.</p>