[分享]css中如何把盒子放中间

在网页设计中，经常需要将一个盒子放在页面的中间位置，这时候我们可以使用CSS来进行布局。首先，我们需要给这个盒子一个固定的宽度，比如像素。然后，我们可以使用margin属性来让它居中。具体来说，我们可...

在网页设计中，经常需要将一个盒子放在页面的中间位置，这时候我们可以使用CSS来进行布局。
首先，我们需要给这个盒子一个固定的宽度，比如***像素。然后，我们可以使用margin属性来让它居中。具体来说，我们可以将左右margin设置为“auto”，上下margin设置为需要的值，如下所示：

css
.box {
  width: ***px;
  margin: 100px auto 0;
} 

这样，这个盒子就会在页面的中间位置，距离顶部100像素的位置。
如果我们需要将文本内容放在这个盒子中间，可以使用text-align属性来居中。比如，我们可以给这个盒子内部的p标签设置text-align：center来使得文本居中显示：

css
.box p {
  text-align: center;
} 

如果我们需要在这个盒子中显示一段CSS代码，可以使用pre标签来展示，同时使用text-align属性来居中：

html<br>
<div class="box"><br>
  <pre><br> <br>
      css代码<br>  

css
.box {
  width: ***px;
  margin: 100px auto 0;
  text-align: center;
}

.box pre {
  text-align: left;
} 

这样，我们就可以在盒子中间位置，居中显示一段CSS代码了。