Q:

how to make html content in browser center?

I'm new to html/css, I have tried many times on a simple html/css file, but still not working. I want to make the content in center of the browser.
two source code are under same directory, here's the source code:
index.html:
<!DOCTYPE HTML>
<html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<head>
    <link rel="alternate stylesheet" type="text/css" href="style.css" />
</head>
<body>

<hr>
<h2>Head Title2</h2>
<p align="center">write something in the center</p>

<hr>
<h4>Content</h4>
<div class="centered">
Introduction<br>
Chapter<br>
<ol>
    <li>Chapter-1<br>
    <ol>
        <li>Section-1</li>
        <li>Section-2</li>
        <li>Section-3</li>
        <li>Section-4</li>
    </ol>
    </li>
    <li>Chapter-2<br>
    <ol>
        <li>Section-1</li>
        <li>Section-2</li>
        <li>Section-3</li>
        <li>Section-4</li>
    </ol>
    </li>
    <li>Chapter-3<br>
    <ol>
        <li>Section-1<br>
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        </li>
        <li>Section-2<br>
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        </li>
        <li>Section-3<br>
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        </li>
    </ol>
    </li>
</ol>

<hr>
<h4>Reference</h4>
<ul>
    <li>book1</li>
    <li>book2</li>
    <li>book3</li>
</ul>

</div>
<hr>
</body>
</html>

style.css:
h1 {
    text-align: center;
    font-family: Cambria,Calibri,"Arial","Microsoft YaHei","黑体","宋体",sans-serif;
    font-size: 48px;
}

h2 {
    text-align: center;
    font-family: Cambria,Calibri,"Arial","Microsoft YaHei","黑体","宋体",sans-serif;
    font-size: 44px;
}

h3 {
    text-align: left;
    font-family: Cambria,Calibri,"Arial","Microsoft YaHei","黑体","宋体",sans-serif;
    font-size: 42px;
}

h4 {
    text-align: left;
    font-family: Cambria,Calibri,"Arial","Microsoft YaHei","黑体","宋体",sans-serif;
    font-size: 40px;
}

p {
    text-indent: 25px;
}

body {
    margin: 0;
    padding: 0;
    text-align: center; /* !!! */
}

.centered {
    margin: 0 auto;
    width: 800px;
}

but all the content are in left part. it shows like this:

I want the content in center part, and still the same format. what should I do ?
besides, I found my h1-h4 css not working, when I modify the font-size, index.html didn't change at all. why is it ?

thank for your help, after reading @J.Sahbu's code, I update my source code like this:
index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<hr>
<h2>Head Title2</h2>
<p align="center">write something in the center</p>

<hr>
<h4>Content</h4>
Introduction<br>
Chapter<br>
<ol>
    <li>Chapter-1<br>
    <ol>
        <li>Section-1</li>
        <li>Section-2</li>
        <li>Section-3</li>
        <li>Section-4</li>
    </ol>
    </li>
    <li>Chapter-2<br>
    <ol>
        <li>Section-1</li>
        <li>Section-2</li>
        <li>Section-3</li>
        <li>Section-4</li>
    </ol>
    </li>
    <li>Chapter-3<br>
    <ol>
        <li>Section-1<br>
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        </li>
        <li>Section-2<br>
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        </li>
        <li>Section-3<br>
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        </li>
    </ol>
    </li>
</ol>

<hr>
<h4>Reference</h4>
<ul>
    <li>book1</li>
    <li>book2</li>
    <li>book3</li>
</ul>

<hr>

</body>
</html>

style.css:
h1 {
    text-align: center;
    font-family: Cambria,Calibri,"Arial","Microsoft YaHei","黑体","宋体",sans-serif;
    font-size: 34px;
}

h2 {
    text-align: center;
    font-family: Cambria,Calibri,"Arial","Microsoft YaHei","黑体","宋体",sans-serif;
    font-size: 30px;
}

h3 {
    text-align: left;
    font-family: Cambria,Calibri,"Arial","Microsoft YaHei","黑体","宋体",sans-serif;
    font-size: 26px;
}

h4 {
    text-align: left;
    font-family: Cambria,Calibri,"Arial","Microsoft YaHei","黑体","宋体",sans-serif;
    font-size: 24px;
}

p {
    text-indent: 25px;
}

body {
    font-family: Cambria,Calibri,"Arial","Microsoft YaHei","黑体","宋体",sans-serif;
    font-size: 20px;
    margin-left: 20%;
    margin-right: 20%;
    min-width: 600px;
    max-width: 1024px;
}

This style is actually what I want.

A:

Here is your fixed code. Just copy and paste below HTML And CSS as it is.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<hr>
<h2>Head Title2</h2>
<p align="center">write something in the center</p>

<hr>
<h4>Content</h4>
<div class="centered">
Introduction<br>
Chapter<br>
<ol>
    <li>Chapter-1<br>
    <ol>
        <li>Section-1</li>
        <li>Section-2</li>
        <li>Section-3</li>
        <li>Section-4</li>
    </ol>
    </li>
    <li>Chapter-2<br>
    <ol>
        <li>Section-1</li>
        <li>Section-2</li>
        <li>Section-3</li>
        <li>Section-4</li>
    </ol>
    </li>
    <li>Chapter-3<br>
    <ol>
        <li>Section-1<br>
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        </li>
        <li>Section-2<br>
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        </li>
        <li>Section-3<br>
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        </li>
    </ol>
    </li>
</ol>

<hr>
<h4>Reference</h4>
<ul>
    <li>book1</li>
    <li>book2</li>
    <li>book3</li>
</ul>

</div>
<hr>
</body>
</html>

css
body
{
 font-family: Cambria,Calibri,"Arial","Microsoft YaHei","黑体","宋体",sans-serif;
    font-size: 18px;    
      text-align: center;
    margin: 0 auto;
}

h1 {
    text-align: center;
    font-family: Cambria,Calibri,"Arial","Microsoft YaHei","黑体","宋体",sans-serif;
    font-size: 28px;
}

h2 {
    text-align: center;
    font-family: Cambria,Calibri,"Arial","Microsoft YaHei","黑体","宋体",sans-serif;
    font-size: 24px;
}

h3 {
    text-align: left;
    font-family: Cambria,Calibri,"Arial","Microsoft YaHei","黑体","宋体",sans-serif;
    font-size: 22px;
}

h4 {
    text-align: center;
    font-family: Cambria,Calibri,"Arial","Microsoft YaHei","黑体","宋体",sans-serif;
    font-size: 20px;
}

p {
    text-indent: 25px;
}

.centered {
    margin: 0 auto;
    text-align: center;
    width: 15%;
}

Cheers !

