[分享]css中如何将div居中

CSS（Cascading Style Sheets）是用来定义网页样式的语言，通过它我们可以实现很多网站布局的效果，其中一个比较常用的功能就是将DIV居中显示。下面这篇文章将介绍如何通过CSS将DI...

CSS（Cascading Style Sheets）是用来定义网页样式的语言，通过它我们可以实现很多网站布局的效果，其中一个比较常用的功能就是将DIV居中显示。下面这篇文章将介绍如何通过CSS将DIV居中。
首先需要给要居中的DIV添加样式：

css
.center {
    width: 50%; /* 设置宽度为50% */
    margin: 0 auto; /* 设置margin为0，并将左右margin设置为自动 */
} 

其中设置宽度为50%是为了让DIV宽度不要占满整个屏幕，让页面更美观。而margin: 0 auto;则是将DIV的左右margin设置为自动，这样就可以实现居中的效果。
代码如下：

html<br>
<div class="center"><br>
    <p>这是一段居中的文字。</p><br>
    <pre><br> <br>
            const message = 'Hello, World!';<br>
            alert(message);<br>  

其中，我们使用了p标签和pre标签来分别展示文章段落和代码段落。p标签是HTML中的段落标签，用于表示一段文字，而pre标签则是表示预格式化文本，它会保留原始的空白符和换行符，适用于展示代码等需要保留格式的内容。
通过上述CSS和HTML代码的配合，我们就可以实现将DIV及其中的文章和代码居中。
希望这篇文章能对大家有所帮助。