css中怎么将body居中

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

在网页设计中，让网页元素居中是一项基本的技能。在CSS中，让body居中是一件非常简单的事情，只需要给body元素添加一个margin:auto的样式即可。下面我们来看看具体的实现方法。首先，我们需要

在网页设计中，让网页元素居中是一项基本的技能。在CSS中，让body居中是一件非常简单的事情，只需要给body元素添加一个margin:auto的样式即可。下面我们来看看具体的实现方法。
首先，我们需要在HTML中设置好网页的基本结构。比如下面这样：

<br>
<!DOCTYPE html><br>
<html><br>
<head><br>
	<title>居中演示</title><br>
	<style><br>

		body {<br>
			margin: auto;<br>
			width: 80%;<br>
			background-color: #eee;<br>
			padding: 20px;<br>
		}<br>

        pre {<br>
            background-color: #ddd;<br>
            padding: 10px;<br>
        }<br>

        p {<br>
            color: #333;<br>
            font-size: 16px;<br>
            line-height: 1.5;<br>
        }<br>
        <br>
	</style><br>
</head><br>
<body><br>

	<p>这是一个段落，我们可以通过给p标签添加样式来控制它的字体颜色、大小、行高等。</p><br>

    <pre><br> <br>
            .hello {<br>
                font-size: 24px;<br>
                color: red;<br>
            }<br>

上面的代码中，我们给body元素添加了margin:auto、width:80%、padding:20px的样式，分别表示：水平居中，宽度为80%，左右边距为20px。这样就可以让网页元素在浏览器中居中显示。
此外，我们还给段落p标签、代码pre标签添加了一些样式，以控制它们的外观、颜色等。
需要注意的是，在pre标签中我们还嵌套了一个code标签，这样可以更好地显示代码。我们同样也可以给code标签添加一些样式来控制它的字体、颜色等。
总之，让body居中是一项在网页设计中常用的技巧，只需要给它添加margin:auto的样式即可。此外，我们还需要在HTML中设置好网页的基本结构，并通过样式来控制各个元素的外观。

文章说明:

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

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

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