css中怎么设置整个网页居中

发表于前端技术学习版块 css,教程

在前端设计中，居中是非常常见的布局方式之一。要想将整个网页居中，就需要运用到CSS样式。html,body{ height: 100%; margin: 0; padding: 0; } .conta

在前端设计中，居中是非常常见的布局方式之一。要想将整个网页居中，就需要运用到CSS样式。

html,body{
    height: 100%;
    margin: 0;
    padding: 0;
}

.container{
    width: 960px;/*根据实际需求设置宽度*/
    height: 100%;
    margin: 0 auto;/*实现水平居中*/
}

首先，我们需要设置html和body的高度为100%，并将margin和padding都设置为0。接下来，我们需要将整个网页放到一个容器中，设置容器的宽度为固定值（根据实际需求设置），高度也设置为100%。然后，通过设置margin:auto来实现容器水平居中。

例如，下面这个例子，将整个网页都居中了：

<!DOCTYPE html>
<html>
    <head>
        <style>
            html,body{
                height: 100%;
                margin: 0;
                padding: 0;
            }
            .container{
                width: 960px;
                height: 100%;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <!-- 这里放置整个网页的内容 -->
        </div>
    </body>
</html>

以上就是设置整个网页居中的CSS样式。在实际开发中，可以根据具体需求对宽度等进行适当的调整。希望本文对大家有所帮助。

文章说明:

本文原创发布于探乎站长论坛，未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。

该文观点仅代表作者本人，探乎站长论坛平台仅提供信息存储空间服务。