JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">
  <form method="post" id="child">
    <table align="center" cellpadding="2" cellspacing="2" border="0">
      <tr>
        <td>Username:</td>
        <td>
          <input type="text" name="username">
        </td>
      </tr>
      <tr>
        <td>Password:</td>
        <td>
          <input type="password" name="password">
        </td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>
          <input type="submit" name="btnLogin" style="width:173px; height:40px;" value="Login">
        </td>
      </tr>
    </table>
  </form>
</div>

CSS

#parent {
  width: 500px;
  height: 600px;
  background-color: gold;
  position: absolute;
  /*it can be fixed too*/
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  /*this to solve "the content will not be cut when the window is smaller than the content": */
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
}

#child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  
}