css盒子设置为中间

在网页布局中，经常需要将一个盒子（div）设置到页面垂直水平居中的位置。使用CSS中的Flex布局可以轻松实现这一效果。

<code> <div class="container">
  
   
   
   
 <p>这是居中的内容</p>
  
   
   </div> 

在上面的代码中，我们首先创建了一个名为.container的div容器，用于包裹垂直水平居中的内容。然后使用Flex布局，将该容器设置为居中状态。

具体来说，我们通过以下CSS代码实现了中心对齐的效果：

<code> .container {
  
   
   
   
 display: flex;
  
   
   
   
 justify-content: center;
  
   
   
   
 align-items: center;
  
   
   
   
 height: 100vh;
  
   
}
 

其中，我们使用了display:flex将容器设置为Flex布局。接着，使用justify-content:center将内容在容器中水平居中，align-items:center将内容在容器中垂直居中。最后，设置高度为视口高度（vh），使容器占据整个视口。

使用上述代码，即可轻松实现将盒子设置到页面中央的效果。