Centering with margin not working

HTML-CSS
1

Hi, I’ll just post my code . I did exactly the same as I read online that should work.

<!DOCTYPE html>

<html>
<head>
    <title>Page title </title>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
    <p class="center"> text to center on screen </p>
</body>
</html>

*{
	margin:0;
	border:0;
	padding:0;
}
body {
	position: absolute;
	display: block;
}
.center {
	position: relative;
	width: calc(100% - 2em);
	float: none;
	margin: auto;
}

I read that you need position relative or static, display block , a width, float none , and then margin:auto should work.
I have a rather old laptop , maybe that has something to do with it? I’m using firefox.
and windows 7.

Thanks

2

1st from w3schools:
You can set the margin property to auto to horizontally center the element within its container.

The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.

So what happens if we remove the margine auto and replace it with the values ?since there is no container?

margin: 25px 50px 75px 100px;

Then it will go to the center

3

Thanks. I tried that , but it’s still not in the center for me ? More on the left side of the page. I’m really confused about this.
I’m doing the same as what the tutorials say ?

4

Hmm, text-align center does seem to work.
But if a text element is just another element why does it not work to center with margin?
CSS is very vague so far :stuck_out_tongue_winking_eye: