JavaFX [FXML] Keep components in the center of the window when the window is resized

Question

I am using javaFX and FXML file to create a UI. Here is the fxml file.

<VBox alignment="CENTER" prefHeight="720.0" prefWidth="1080" spacing="20.0" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="fi.tuni.prog3.sisu.PrimaryController">
   <children>
      <TabPane fx:id="tabPane" prefHeight="650.0" prefWidth="828.0" tabClosingPolicy="UNAVAILABLE">
        <tabs>
          <Tab text="Aloitus">
            <content>
              <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="202.0" prefWidth="289.0">
                     <children>
                        <TextField id="nimi" fx:id="nimi" layoutX="475.0" layoutY="198.0" />
                        <TextField id="opnro" fx:id="opnro" layoutX="475.0" layoutY="236.0" /> 
                        <Label layoutX="424.0" layoutY="203.0" text="Nimi:" />
                        <Label layoutX="346.0" layoutY="241.0" text="Opiskelijanumero:" />
                        <ComboBox id="box" fx:id="box" layoutX="400.0" layoutY="278.0" minHeight="-Infinity" minWidth="-Infinity" prefHeight="27.0" prefWidth="241.0" />
                        <Button fx:id="EIKU" layoutX="491.0" layoutY="315.0" mnemonicParsing="false" onAction="#EIKUPressed" prefHeight="27.0" prefWidth="60.0" text="EIKU" />
                        <Button layoutX="491.0" layoutY="352.0" mnemonicParsing="false" onAction="#buttonPressed" text="Valmis" />
                     </children>
                     <padding>
                        <Insets bottom="1.0" left="1.0" right="1.0" top="1.0" />
                     </padding>
                  </AnchorPane>
            </content>
          </Tab>
          <Tab id="tab2" fx:id="tab2" text="Koulutus">
            <content>
              <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
                     <children>
                        <SplitPane dividerPositions="0.5" layoutX="-1.0" layoutY="-1.0" prefHeight="573.0" prefWidth="828.0">
                          <items>
                            <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0">
                                 <children>
                                    <TreeView id="puu" fx:id="puu" layoutX="6.0" prefHeight="571.0" prefWidth="404.0" />
                                 </children>
                              </AnchorPane>
                            <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="486.0" prefWidth="456.0" />
                          </items>
                        </SplitPane>
                     </children></AnchorPane>
            </content>
          </Tab>
        </tabs>
      </TabPane>
   </children>

   <padding>
      <Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
   </padding>
</VBox>

My problem is the fact that the fields and buttons stay in the same place when resizing the window. So they eventually will disappear if I minimize the window a lot, and if I expand the window, they will stay the same distance away from the left and top of the window as initially.

I would like them to stay in the same place compared to all 4 sides, so that they would remain in the center of the window. How can I implement that? I've been searching for the answer and honestly feel a bit dumb for not finding it.

Answer 1

Thanks to @jewelsea. Using stackPane with margins solved my problem perfectly. I used SceneBuilder and added contents one by one, and edited each component's margin so that it took the desired place.