title: How to align an Textarea in the middle of the webpage
body: <p>Hi Guys I've been trying to figure out how to sit my textarea in the middle of the webpage and sit next to my other textarea that's on the left side of the screen. Code below! i would very much appreciate it, if I could get 2 different ways i could have approached this plz.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-color: #434343;
  }
  
  #textFields {
    display: flex;
    flex-direction: column;
    vertical-align: middle;
  }
  
  .center {
    margin: auto;
    display: block;
    text-align: center;
    margin-left: 550px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;link rel="stylesheet" href="styles.css"&gt;
    &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;textarea name="Buy" id="advertise" cols="30" rows="50"&gt;&lt;/textarea&gt;
  
    &lt;div id="textFields"&gt;
      &lt;textarea name="" class="center" cols="30" rows="10"&gt;&lt;/textarea&gt;
      &lt;textarea name="" class="center" cols="30" rows="10"&gt;&lt;/textarea&gt;
      &lt;textarea name="" class="center" cols="30" rows="10"&gt;&lt;/textarea&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>