JavaFX: How to center the center node on a borderpane according to the Stage?

Question

I am having a problem centering a button in my borderpane to be centered according to the stage. It is centered according to the borderpane but I want it to be in the exact center of the window.

I am referring to the bottom part of my picture which has the play button and difficulty choiceBox.

I am using a borderpane to have the difficulty part be on the right side and the play button in the center.

As you can see, play is not centered in the picture.

I would like to do that but I'm not sure how. I think that I could possibly set the width of my left node to be equal to my right node but I don't have anything for my left Node.

// bottom section for positioning
    BorderPane settings = new BorderPane();
    settings.setPadding(new Insets(10));

    // play button
    Button playBtn = new Button("Play");
    settings.setCenter(playBtn);

    // difficulty options
    Label diffLabel = new Label("Difficulty: ");
    ChoiceBox<String> diffBox = new ChoiceBox<String>(FXCollections.observableArrayList(
            "Easy", "Standard", "Hard"
    ));
    diffBox.getSelectionModel().select(1);

    // for wrapping the diffuclty.
    HBox difficulty = new HBox(diffLabel, diffBox);
    difficulty.setAlignment(Pos.CENTER);
    difficulty.setSpacing(10);

    settings.setRight(difficulty);

Answer 1

One of the possibilities is to add a Region to the left side of the BorderPane to act like a spacer.

From the doc of BorderPane :

The left and right children will be resized to their preferred widths and extend the length between the top and bottom nodes. And the center node will be resized to fill the available space in the middle.

Therefore adding a spacer with the same width as the HBox on the right side should solve the problem:

Region padderRegion = new Region();
padderRegion.prefWidthProperty().bind(difficulty.widthProperty());
settings.setLeft(padderRegion);

Here the width of the left spacer is bound to the width of the HBox on the right side, therefore the centered Node (the play button) will be centered on the screen.

Another possibility is to use various padders within a HBox :

HBox bottomPanel = new HBox();
bottomPanel.setAlignment(Pos.CENTER);

Region padderRegion1 = new Region();
Region padderRegion2 = new Region();
Region padderRegion3 = new Region();
padderRegion1.prefWidthProperty().bind(diffLabel.widthProperty().add(diffBox.widthProperty()));

bottomPanel.getChildren().addAll(padderRegion1, padderRegion2, playBtn, padderRegion3, diffLabel, diffBox);
HBox.setHgrow(padderRegion2, Priority.ALWAYS);
HBox.setHgrow(padderRegion3, Priority.ALWAYS);

Answer 2

try this:

public class Main extends Application {

    public static void main(String[] args) {
        Application.launch(args);
    }

    public void start(Stage stage) {

        BorderPane settings = new BorderPane();
        settings.setPadding(new Insets(10));

        Button playBtn = new Button("Play");

        Label zombieLabel = new Label("Zombie Dice");
        zombieLabel.setStyle("-fx-font-size: 60");
        zombieLabel.setAlignment(Pos.CENTER);
        HBox zomBox = new HBox();
        zomBox.getChildren().add(zombieLabel);
        zomBox.setAlignment(Pos.CENTER);

        Label indicateLabel = new Label("Indicate who is playing");
        indicateLabel.setStyle("-fx-font-size: 20");
        indicateLabel.setAlignment(Pos.CENTER);
        HBox indBox = new HBox();
        indBox.getChildren().add(indicateLabel);
        indBox.setAlignment(Pos.CENTER);


        ChoiceBox<String> diffBox = new ChoiceBox<>(FXCollections.observableArrayList(
                "Easy", "Standard", "Hard"
        ));
        diffBox.getSelectionModel().select(1);

        GridPane gridPane = new GridPane();
        gridPane.setPadding(new Insets(5));
        gridPane.setHgap(5);
        gridPane.setVgap(5);

        ColumnConstraints col1 = new ColumnConstraints(150);
        ColumnConstraints col2 = new ColumnConstraints(150);
        ColumnConstraints col3 = new ColumnConstraints(150);

        gridPane.getColumnConstraints().addAll(col1, col2, col3);
        gridPane.setAlignment(Pos.CENTER);

        HBox hBox = new HBox(10);
        hBox.getChildren().addAll(playBtn);
        hBox.setAlignment(Pos.CENTER);

        gridPane.add(zomBox, 0, 0, 3, 1);
        gridPane.add(indBox, 0, 1, 3, 1);
        gridPane.add(hBox, 1, 2);
        gridPane.add(diffBox, 2, 2);

        Scene root = new Scene(gridPane);
        stage.setScene(root);
        stage.show();
    }
}

probably you have to play with padding and gap.