Making a response button between mobile and desktop devices

I have a simple task, make a button that is always centered. What is the best approach, can it be done simply?

So far, I have made a blue button, but for some reason when I go height 100%, width 100%, it is not filling up the entire screen. https://imgur.com/a/EIznC, why would the html body not be default to be 100% of the page?

Code so far:

Style.css, using an angular project.

.body {
    height: 100%;
    width: 100%;
}

app.component.ts <button class="button button5"> </button>

app.component.css

.button {
    background-color: #0066ff;
    border: 1px solid blue;
    color: white;
    height: 100%;
    width: 100%;
}

.button5 {border-radius: 50%;}

I expected my button to take up the entire page, as it's parent. (body) should be 100% of the page.

1 answer

  • answered 2018-01-11 20:46 michael d

    Have you tried the simple (yet not recommended <center> tag? I use it all the time. Works just fine.

    If not, you can use margin-left: calc(50% - 50px); If the image is 100px wide. You can use text-align:center; or align:center;