Is there any way to put button into center of div?

Question

Hello everyone I tried to get help form google and it did not work for me i have tried display as table-cells, table, flex, grid etc. So i am looking for some help if you can thank you everyone.

<html>
    <style>
.contact-us{
    background-color:  grey;
    width: 100%;
    min-height: 230px;
    padding: 50px 300px 50px 300px;
    display: grid;
    text-align: center;
    color: #fff;
    vertical-align: middle;
}
.contact-us .btn{
  width: 100px;
  height: 30px;
  text-align: center;
  font-size: 13px;
  display: grid;
}
    </style>
    <body>
        <div class="contact-us">
            <h2>CONTACT US TODAY</h2>
              <h5>Have any questions or comments? Need a WINZ quote? Call us at (022) 1736590.</h5>
              <button class="btn">CONTACT US</button>
        </div>
    </body>
</html>

Hi, welcome to Stackoverflow. Please add some code so we can see what you have. We need a minimum of code to replicate the problem and fix it. Also the image isn't showing much. — Rmaxx, Jun 09 '20 at 07:12
Hi mate sorry about delay using it first time. I have added some code may be help us. — Sawarnjit Singh Bainipal, Jun 09 '20 at 07:45
Does this answer your question? [How to center a button within a div?](https://stackoverflow.com/questions/7560832/how-to-center-a-button-within-a-div) — Vega, Jun 09 '20 at 07:49

cam · Answer 1 · 2020-06-10T01:19:38.597

I like the flex-box approach.

We'll make the body element full height and then center your contact-us element in the center of the body using flex-box.

<html>
  <style>=
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color:  grey;
      min-height: 100vh;
    }
    
    .contact-us{
      text-align: center;
      color: #fff;
    }

    .contact-us .btn{
      width: 100px;
      height: 30px;
      text-align: center;
      font-size: 13px;
    }
  </style>
  <body>
    <div class="contact-us">
      <h2>CONTACT US TODAY</h2>
      <h5>Have any questions or comments? Need a WINZ quote? Call us at (022) 1736590.</h5>
      <button class="btn">CONTACT US</button>
    </div>
  </body>
</html>

Hi mate this one did not work not too sure why – Sawarnjit Singh Bainipal Jun 09 '20 at 07:45 — Sawarnjit Singh Bainipal, Jun 09 '20 at 07:45
Hey mate, i've updated my answer with a new approach – cam Jun 10 '20 at 01:19 — cam, Jun 10 '20 at 01:19

SoliMoli · Answer 2 · 2020-06-09T08:05:26.627

1

.contact-us {
text-align: center;
}

h2{
text-align:left;
}

h5{
text-align: left;
}

<html>
    <style>
.contact-us{
    background-color:  grey;
    width: 100%;
    min-height: 230px;
    color: #fff;
    vertical-align: middle;
}
.contact-us .btn{
  width: 100px;
  height: 30px;
  font-size: 13px;
}
    </style>
    <body>
        <div class="contact-us">
            <h2>CONTACT US TODAY</h2>
              <h5>Have any questions or comments? Need a WINZ quote? Call us at (022) 1736590.</h5>
              <button class="btn">CONTACT US</button>
        </div>
    </body>
</html>

Make it much shorter. no need to use flex.! flex is partial supported in IE and its not good to use.

div {
text-align: center;
}

<div>
  <button>Im Centered!</button>
</div>

edited Jun 09 '20 at 08:05

answered Jun 09 '20 at 07:29

SoliMoli

781
2
6
25

Hi mate it did go through but now button is going to next div and there is huge gap between all three lines – Sawarnjit Singh Bainipal Jun 09 '20 at 07:50
I changed the snippet thats what you're lookng for? – SoliMoli Jun 09 '20 at 08:08

Is there any way to put button into center of div?

2 Answers2