title: Create html layout similar to android
body: <p>I have a <code>WebView</code> that displays a html layout. But the problem is the html layout isn't coming out how I expected it. I created a Android layout using xml but I want the layout in html. this is what i am trying trying achieve</p>
  
  <p>The grey part represents a background image.
  The purple part a image(Logo).
  Then I have a white box with round corners and <code>TextView</code> and <code>Button</code> inside. this is done in android xml but i want something similar in html</p>
  
  <p><a href="https://i.stack.imgur.com/oacyR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oacyR.png" alt="Layout in android xml"></a></p>
  
  <p>This is how it looks in html</p>
  
  <p><a href="https://i.stack.imgur.com/Sb6Cg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Sb6Cg.png" alt="Layout in html"></a></p>
  
  <p>But as you can see the logo is behind the white box and the <code>TextView</code> is next to the button instead of the top.</p>
  
  <p>here is my html code</p>
  
  <p>
  </p>
  
  <pre><code>&lt;style&gt;
  
      div {
          padding: 10px 10px;
          background: #fff;
          width: 300px;
          border-radius: 10px;
          margin : 0 auto;
      }
      body {
          background-image: url("url to background image");
          //background-size: cover;
      }
      .logo {
          background-image: url("url to logo");
          background-size: cover;
          height:  70px;
          width: 200px;
          margin-bottom 40;
          background-color: rgba(0, 0, 0, 0);
      }
      .container {
          display: table;
          height: 100%;
          position: absolute;
          overflow: hidden;
          width: 100%;
          background-color: rgba(0, 0, 0, 0);
      }
      .helper {
          #position: absolute;
          #top: 50%;
          display: table-cell;
          vertical-align: middle;
          background-color: rgba(0, 0, 0, 0);
      }
      .content {
          #position: relative;
          #top: -50%;
          margin: 0 auto;
          width: 200px;
      }
      .button {
          -moz-border-radius:15px;
          -webkit-border-radius:15px;
          border-radius:15px;
          background-color: #4CAF50;
          border: none;
          color: white;
          padding: 15px 32px;
          text-align: center;
          text-decoration: none;
          display: inline-block;
          font-size: 16px;
          margin: 4px 2px;
          cursor: pointer;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;div class="container"&gt;
  
      &lt;div class="helper"&gt;
  
        &lt;div class="logo"/&gt;
  
          &lt;div class="content"&gt;
  
            &lt;p1&gt;Text &lt;/p1&gt;
  
              &lt;input type="submit" class="button" value="Button"&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p></p>
  
  <p>Can someone please help me fix my html code to look like the android xml version</p>