平时写布局的时候要保证头部标题或者横向的菜单和主体内容居中，可以将定义一个样式，比如:

<style>

.container{

            width: 980px;

            margin: 0 auto;

        }

</style>

头部和主体部分样式都放在带有该样式的标签里:


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        body{

            margin: 0 auto;

            //解决body边框问题

        }

        .header{

            height: 48px;

            background-color: red;

        }

        .body{

            background-color: #dddddd;

        }

        .container{

            width: 980px;

            margin: 0 auto;

        }

    </style>

</head>

<body>

    <div class="header">

        <div class="container">

           <a>头部内容</a>

        </div>

    </div>


    <div class="body">

        <div class="container">

        <p>主干内容</p>

        <p>主干内容</p>

        <p>主干内容</p>

        <p>主干内容</p>

        </div>

    </div>

    <div class="footer"></div>

</body>

</html>

显示效果:

wKiom1fVYV7QTDdwAAAz5W3UIW4625.png