Why wont this css code center the two elements on the page? - html

Question

I want to centre the content on my page. I have a button and a paragraph of text on my page.
I'm new to css so I don't know what I should try.
body {
margin: 0 auto;
}
button {
top: 921px;
left: 400px;
width: 180px;
height: 60px;
background: #ff9b52 0% 0% no-repeat padding-box;
border-radius: 30px;
opacity: 1;
}
p.text {
top: 2639px;
left: 1014px;
width: 398px;
height: 88px;
text-align: left;
font: Regular 20px/27px Segoe UI;
letter-spacing: 0;
color: #39316c;
opacity: 1;
}
<button>Click Me</button>
<p class="text">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis
necessitatibus sed officiis repellat illo ratione libero recusandae
tempora dolorum excepturi. Velit odio mollitia nam vel, nulla nostrum
officiis exercitationem esse!
</p>

Answer 1

You can use display: flex;
body,
html {
height: 100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
p {
text-align: center;
}
button {
width: 180px;
height: 60px;
background: #ff9b52 0% 0% no-repeat padding-box;
border-radius: 30px;
opacity: 1;
}
<div class="container">
<button>Click Me</button>
<p class="text">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis necessitatibus sed officiis repellat illo ratione libero recusandae tempora dolorum excepturi. Velit odio mollitia nam vel, nulla nostrum officiis exercitationem esse!
</p>
</div>

Answer 2

Used flexbox for that:
body {
margin: 0 auto;
}
.wrapper {
display: flex;
align-items:center;
flex-direction: column;
justify-content: center;
height: 100vh;
}
button {
top: 921px;
left: 400px;
width: 180px;
height: 60px;
background: #ff9b52 0% 0% no-repeat padding-box;
border-radius: 30px;
opacity: 1;
}
p.text {
top: 2639px;
left: 1014px;
width: 398px;
height: 88px;
text-align: left;
font: Regular 20px/27px Segoe UI;
letter-spacing: 0;
color: #39316c;
opacity: 1;
}
<div class="wrapper">
<button>Click Me</button>
<p class="text">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis
necessitatibus sed officiis repellat illo ratione libero recusandae
tempora dolorum excepturi. Velit odio mollitia nam vel, nulla nostrum
officiis exercitationem esse!
</p>
</div>

Answer 3

You can use flexbox. Take a look at this https://css-tricks.com/snippets/css/a-guide-to-flexbox/.
Here is the solution for your current problem.
html,body, .wrapper {
margin: 0;
height: 100%;
}
.wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
button {
width: 180px;
height: 60px;
background: #ff9b52 0% 0% no-repeat padding-box;
border-radius: 30px;
opacity: 1;
}
p.text {
width: 398px;
height: 88px;
text-align: left;
font: Regular 20px/27px Segoe UI;
letter-spacing: 0;
color: #39316c;
opacity: 1;
}
<div class="wrapper">
<button>Click Me</button>
<p class="text">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis necessitatibus sed officiis repellat illo ratione libero recusandae tempora dolorum excepturi. Velit odio mollitia nam vel, nulla nostrum officiis exercitationem esse!
</p>
</div>

Answer 4

You can use flexbox technique as they say in other comments or you can add some lines to you code.
Add to body text-align: center; and add to p.text margin: 0 auto;
Your CSS code will become like that:
body {
margin: 0 auto;
text-align: center;
}
button {
top: 921px;
left: 400px;
width: 180px;
height: 60px;
background: #ff9b52 0% 0% no-repeat padding-box;
border-radius: 30px;
opacity: 1;
}
p.text {
margin: 0 auto;
top: 2639px;
left: 1014px;
width: 398px;
height: 88px;
text-align: left;
font: Regular 20px/27px Segoe UI;
letter-spacing: 0;
color: #39316c;
opacity: 1;
}
See demo here

Answer 5

Just add
text-align: center;
and remember to remove the
text-align: left;
from your p.text

Answer 6

Some things to consider;
You are using top and left rules without giving a position rule value other than static (the default value). In your case you should use position: absolute
Don't use positioning with absolute values, if you don't need to. Absolute values (px unit) are not flexible enough to adjust to window size. Use relative units like % or vw/vh
For your contents to act as a group of elements, you should wrap it with a container element, which you then position accordingly (I used <div class="center"></div>)
I positioned this center container element absolutely using top: 50vh and left: 50vw. 100vh is 100 per cent of the view height, i.e. the inner window height and 100vw is 100 per cent of the view width likewise
This positioning is not enough, because it will position the top left corner of the .center element at the center of the window. We need to have a correction. I use transform: translate(-50%, -50%). This will shift an element 50% of its width to the left and 50% of its height to the top, making it perfectly centered.
There are alternatives like flexbox mentioned in the other posts, but this one is a little bit more straightforward for a beginner like you. Nonetheless it is recommended to learn flexbox. You might want to read A complete guide to flexbox on css-tricks.com
body {
margin: 0 auto;
}
.center {
position: absolute;
top: 50vh;
left: 50vw;
transform: translate(-50%, -50%);
}
button {
width: 180px;
height: 60px;
background: #ff9b52 0% 0% no-repeat padding-box;
border-radius: 30px;
opacity: 1;
}
p.text {
width: 398px;
height: 88px;
text-align: left;
font: Regular 20px/27px Segoe UI;
letter-spacing: 0;
color: #39316c;
opacity: 1;
}
<div class="center">
<button>Click Me</button>
<p class="text">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis necessitatibus sed officiis repellat illo ratione libero recusandae tempora dolorum excepturi. Velit odio mollitia nam vel, nulla nostrum officiis exercitationem esse!
</p>
</div>