I need assistance with a straightforward task - creating a button that remains centered at all times. What would be the most effective method to achieve this, and is it possible to do so easily?
Currently, I have managed to create a blue button; however, when I set both height and width to 100%, it does not occupy the entire screen for some unknown reason. You can view the image here. Why isn't the body element automatically filling up 100% of the page as expected?
Here's the code I have written so far:
In my Style.css file within an Angular project:
.body {
height: 100%;
width: 100%;
}
In app.component.ts:
<button class="button button5"></button>In app.component.css:
.button {
background-color: #0066ff;
border: 1px solid blue;
color: white;
height: 100%;
width: 100%;
}
.button5 {border-radius: 50%;}
I anticipated that my button would fill the entire page since its parent (the body) should inherently occupy 100% of the page.