title: Controls need to stay centered when resizing (responsive UI, JavaFX)
body: <p>I have this code</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  
  &lt;?import com.jfoenix.controls.JFXButton?&gt;
  &lt;?import com.jfoenix.controls.JFXPasswordField?&gt;
  &lt;?import com.jfoenix.controls.JFXTextField?&gt;
  &lt;?import de.jensd.fx.glyphs.fontawesome.FontAwesomeIconView?&gt;
  &lt;?import javafx.scene.control.Label?&gt;
  &lt;?import javafx.scene.image.Image?&gt;
  &lt;?import javafx.scene.image.ImageView?&gt;
  &lt;?import javafx.scene.layout.AnchorPane?&gt;
  &lt;?import javafx.scene.layout.Pane?&gt;
  &lt;?import javafx.scene.paint.LinearGradient?&gt;
  &lt;?import javafx.scene.paint.Stop?&gt;
  &lt;?import javafx.scene.shape.Rectangle?&gt;
  &lt;?import javafx.scene.text.Font?&gt;
  
  &lt;AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="768.0" prefWidth="1366.0" xmlns="http://javafx.com/javafx/10.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.LoginController"&gt;
      &lt;children&gt;
            &lt;Rectangle arcHeight="5.0" height="151.0" stroke="BLACK" strokeType="INSIDE" strokeWidth="0.0" width="1366.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"&gt;
               &lt;fill&gt;
                  &lt;LinearGradient endX="1.0" endY="0.5491606714628298" startX="0.36930455635491605" startY="0.8920863309352518"&gt;
                     &lt;stops&gt;
                        &lt;Stop color="BLACK" /&gt;
                        &lt;Stop color="#2f406b" offset="1.0" /&gt;
                     &lt;/stops&gt;
                  &lt;/LinearGradient&gt;
               &lt;/fill&gt;
            &lt;/Rectangle&gt;
            &lt;ImageView fx:id="ivWordCrex" fitHeight="115.0" fitWidth="105.0" layoutX="631.0" layoutY="14.0" pickOnBounds="true" preserveRatio="true"&gt;
               &lt;image&gt;
                  &lt;Image url="@../../resources/WordCrex_Logo.png" /&gt;
               &lt;/image&gt;
            &lt;/ImageView&gt;
            &lt;Label fx:id="lblLogin" layoutX="655.0" layoutY="201.0" text="Login"&gt;
               &lt;font&gt;
                  &lt;Font name="System Bold" size="22.0" /&gt;
               &lt;/font&gt;
            &lt;/Label&gt;
            &lt;Pane layoutX="502.0" layoutY="278.0" prefHeight="298.0" prefWidth="363.0"&gt;
               &lt;children&gt;
                  &lt;FontAwesomeIconView fx:id="icoUser" glyphName="USER" layoutX="28.0" layoutY="100.0" size="30" text="" /&gt;
                  &lt;FontAwesomeIconView fx:id="icoLock" glyphName="LOCK" layoutX="29.0" layoutY="163.0" size="30" /&gt;
                  &lt;JFXTextField fx:id="txtUName" layoutX="70.0" layoutY="70.0" prefHeight="26.0" prefWidth="225.0" promptText="gebruikersnaam"&gt;
                     &lt;font&gt;
                        &lt;Font size="16.0" /&gt;
                     &lt;/font&gt;
                  &lt;/JFXTextField&gt;
                  &lt;JFXPasswordField fx:id="txtPass" layoutX="69.0" layoutY="133.0" prefHeight="26.0" prefWidth="225.0" promptText="wachtwoord"&gt;
                     &lt;font&gt;
                        &lt;Font size="16.0" /&gt;
                     &lt;/font&gt;
                  &lt;/JFXPasswordField&gt;
                  &lt;JFXButton fx:id="btnLogin" defaultButton="true" layoutX="94.0" layoutY="214.0" onAction="#login" prefHeight="32.0" prefWidth="175.0" style="-fx-background-color: #384667;" text="Inloggen" textFill="WHITE"&gt;
                     &lt;font&gt;
                        &lt;Font size="16.0" /&gt;
                     &lt;/font&gt;
                  &lt;/JFXButton&gt;
               &lt;/children&gt;
            &lt;/Pane&gt;
            &lt;Label fx:id="lblWordCrex" layoutX="636.0" layoutY="119.0" text="WordCrex" textFill="WHITE"&gt;
               &lt;font&gt;
                  &lt;Font size="20.0" /&gt;
               &lt;/font&gt;
            &lt;/Label&gt;    
       &lt;/children&gt; 
  &lt;/AnchorPane&gt;
  </code></pre>
  
  <p>This is how it looks <strong>default</strong>.</p>
  
  <p><a href="https://i.stack.imgur.com/339QB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/339QB.png" alt="enter image description here"></a></p>
  
  <p>When I'm making the window <strong>bigger</strong> it looks like this.</p>
  
  <p><a href="https://i.stack.imgur.com/ktYZj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ktYZj.png" alt="enter image description here"></a></p>
  
  <p>And when I'm making the window <strong>smaller</strong> it looks like this.</p>
  
  <p><a href="https://i.stack.imgur.com/wVF2G.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wVF2G.png" alt="enter image description here"></a></p>
  
  <p><strong>I want to make this scene responsive, so that the banner on top goes the whole width of the window, the image (the throphy) centered and all of the 'login' controls centered in the page.</strong></p>
  
  <p>I've already tried with a bunch of different pane's, but I still can't figure it out. As you can see the AnchorPane has those AnchorPane.'direction'anchor = "0.0", but that's also not working for me. I got that from this tutorial, <a href="https://www.youtube.com/watch?v=5_v58NRTOTM&amp;" rel="nofollow noreferrer">https://www.youtube.com/watch?v=5_v58NRTOTM&amp;</a>.</p>
  
  <p>So if anyone could help me with figuring out how to make this scene responsive, I'd appreciate it a lot!</p>
  
  <p>EDIT:</p>
  
  <p>I now have this, but even here it won't resize with the window.</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  
  &lt;?import javafx.scene.layout.AnchorPane?&gt;
  &lt;?import javafx.scene.layout.StackPane?&gt;
  &lt;?import javafx.scene.shape.Rectangle?&gt;
  
  
  &lt;StackPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="768.0" prefWidth="1366.0" xmlns="http://javafx.com/javafx/10.0.1" xmlns:fx="http://javafx.com/fxml/1"&gt;
     &lt;children&gt;
        &lt;AnchorPane prefHeight="768.0" prefWidth="1366.0"&gt;
           &lt;children&gt;
              &lt;Rectangle fill="#1d288a" height="150.0" stroke="BLACK" strokeType="INSIDE" strokeWidth="0.0" width="1366.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" /&gt;
           &lt;/children&gt;
        &lt;/AnchorPane&gt;
     &lt;/children&gt;
  &lt;/StackPane&gt;
  </code></pre>