How to align a button to the center of the screen html

Question

I am trying to make a button that goes in the centre of the screen I have tried lots of solutions which havent worked html:

      <button align="center" type="button" onclick="location.href='https://discord.gg/AsA7P9B5Mv'" class="button">
      <span align="center" class="button__test"> Join Server </span>
      </button>

css:

  .button {
  text-align: center;
  align: center;
  justify-content: center;  
  align-items: center;  
  height: 10vw;
  width: 25vw;
  margin: 0;
  padding: 0;
  background: #10e321;
  border: none;
  outline: none;
  border-radius: 1vw;
  overflow: hidden;
  font-size: 4vw;
  cursor: pointer;
}
.button:hover{
  background: #11d120;
}
.button:active{
  background: #0eb31b;
}

Help would be greatly appreciated :)

score 2 · Answer 1 · answered Jun 04 '21 at 17:01

There is a couple of options to center element, e.g.

CSS property position - always in the center of the screen

.button {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

}

Flexbox - children element will be always in the center of the parent. You can make the parent full screen.

.parent-element {
    display: flex;
    justify-content: center;
    align-items: center;
}

score 1 · Accepted Answer · answered Jun 04 '21 at 16:48

1

You should use something like this:

<div style="text-align:center">  
    <input type="submit" />  
</div>

Or you could use something like this. By giving the element a width and specifying auto for the left and right margins the element will center itself in its parent.

<input type="submit" style="width: 300px; margin: 0 auto;" />

answered Jun 04 '21 at 16:48

jahantaila

840
5
26

tnx it works :) – Mushroom idiot Jun 04 '21 at 16:53
1

Glad to hear that. Please checkmark my question when you get a chance. – jahantaila Jun 04 '21 at 16:59
yea I wanted to but 10 min wait is pretty annoying especially with simple problems – Mushroom idiot Jun 04 '21 at 17:00

score 0 · Answer 3 · answered Jun 04 '21 at 17:07

0

.class {
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
}

<div class="class">
  <button>html</button>
</div>

answered Jun 04 '21 at 17:07

Abhishek Pakhare

476
1
4
15

How to align a button to the center of the screen html

3 Answers3