title: align every object in the middle
body: <p>so, i have this page <a href="https://imgur.com/a/39Y6yjh" rel="nofollow noreferrer">https://imgur.com/a/39Y6yjh</a>
  and i would like to align all the divs into it, how do i do that?</p>
  <p>i think i have to change something in the middlepane class but i don't know what, i tried changing the float from left to middle but it just messes up the page so idk.</p>
  <p>btw I'm new to css/html so sry if it's bad</p>
  <p>html:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;idk&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;css/index-principale.css&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;css/index-principale-altro.css&quot;&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class=&quot;container&quot;&gt;
          &lt;div class=&quot;leftpane&quot;&gt;
              &lt;div&gt;
                  &lt;p&gt;idk&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;middlepane&quot;&gt;
              &lt;div class=&quot;container-immagini&quot;&gt;
                  &lt;img src=&quot;immagini/immagini-poesie/1.png&quot; alt=&quot;&quot;&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;rightpane&quot;&gt;
              &lt;div&gt;
                  &lt;p&gt;idk&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>and the css:</p>
  <pre><code>    body,
      html {
          width: 100%;
          height: 100%;
          margin: 0;
      }
      
      .container {
          width: 100%;
          height: 100%;
      }
      
      .leftpane {
          /*setting di pagina*/
          width: 25%;
          height: 100%;
          float: left;
          border-collapse: collapse;
          /*altro*/
          background-color: #EFEDE1;
      }
      
      .middlepane {
          /*setting di pagina*/
          width: 50%;
          height: 100%;
          float: left;
          border-collapse: collapse;
          /*altro*/
          background-color: #EFEDE1;
      }
      
      .rightpane {
          /*setting di pagina*/
          width: 25%;
          height: 100%;
          float: left;
          border-collapse: collapse;
          /*altro*/
          background-color: #EFEDE1;
      }
  
      .leftpane div {
          /*settings iniziali per centrarlo*/
          position: relative;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          /*impostazioni del colore del quadrato*/
          width: 400px;
          height: 400px;
          background-color: #E7B2B2;
      }
      
      .leftpane div p {
          /*base
              questo e' il colore della scritta*/
          color: #EFEDE1;
          font-size: 70px;
          /*per spostarlo al centro*/
          position: relative;
          text-align: center;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
      }
      /*
          Playfair Display - 900
          colore = EFEDE1
          sfondo = E7B2B2
      */
      /*****************centro****************/
      
      .container-immagini {
          /*settings iniziali per centrarlo*/
          position: relative;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          background-color: black;
          /*dimensioni immagini*/
          width: 600px;
          height: 600px;
      }
      
      .container-immagini img {
          /*gli do la dimensione in base alla classe prima*/
          width: 100%;
          height: 100%;
      }
      /*****************destra****************/
      
      .rightpane div {
          /*settings iniziali per centrarlo*/
          position: relative;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          /*impostazioni del colore del quadrato*/
          width: 400px;
          height: 400px;
          background-color: #E7B2B2;
      }
      
      .rightpane div p {
          /*base
              questo e' il colore della scritta*/
          color: #EFEDE1;
          font-size: 70px;
          /*per spostarlo al centro*/
          position: relative;
          text-align: center;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
      }
  </code></pre>